文档章节

响应式rem针对UC浏览器12号字体可行性解决方案

P
 PINGE
发布于 2015/04/08 17:43
字数 846
阅读 3647
收藏 1

手机UC浏览器12号字体可行性解决方案

今天上班测试手机专题时候发现,UC浏览器去浏览到手机页面12号字体放大到16号字体大小,始终是改变我所写的样式为12号字体大小,但是苹果 saf 浏览器  还有小米自带浏览器或者国产手机都能正常显示12号字体,这个UC变态啊~~

后来web群里有个同仁说美团移动端用的也是12px字体,瞅了眼,其实美团移动用的并非是12px而是rem字体。

那么,什么是rem字体?rem字体何处使用?为此我也查阅了下资料

「rem」是指根元素(root element,html)的字体大小,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px。(所以UC上为什么12号字体会变成16号而不变成18号!

rem解决字体方案

IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了,我可以使用 rem。

针对UC浏览器这个变态,我们要秉承 响应式 【内容优先,移动优先】的原则!网页中常用的文字大小单位是 px(Pixels),rem始终是基于根元素(html).

先前我们知道 根元素默认的 font-size 都是 16px,也就是UC浏览器默认根元素也是16,那么我们用rem改变页面根元素大小。

html{font-size:62.5%; /* 10÷16=62.5% */} 我们设置html根元素大小表示为62.5%  其实就是网页的10px,那么我们设置12号字体,body{font-size:1.2rem ; /* 12÷10=1.2 */} 那么12号字体使用就是1.2rem。那么14号字体就是1.4rem,然后UC浏览器测试果真12号字体正常显示了,不过事情还没完。

群里兄弟说的美团移动版用的12号字体我看了下,如图。uc12号字体解决性方案

写的是html{font-size:312.5%} 计算 3.125*16=50 px字体,font-size:312.5% 美团 根字体  50px,那么 12号字体就是 12/50=0.24rem 所以美团页面用的是 0.24rem 字体 表示12px字体。

rem解决手机浏览器12号字体

果然如此里面字体是font-size:0.24rem.

不过我们在想想为什么美团要用50PX字体比例,当初我们用谷歌浏览器 可以用-webkit-text-size-adjust:none; 解除最小字体限制早就不管用了。这里又要说谷歌 (我次奥!全是大变态~ `(*∩_∩*)′)。

变态就在于谷歌webkit不支持10px,所有10px会按照12px来计算,1.2rem是14.4px。所以这里我们就需要这样写。

html{

font-size:62.5%; /* 10÷16=62.5% */

}

body{

font-size:12px;

font-size:1.2rem ; /* 12÷10=1.2 */

}

p{

font-size:14px;

font-size:1.4rem;

}

为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值,这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%,还是设置为 font-size:62.5%,如果你引入 了 CSS 预处理工具那么自然可以使用默认值,如果由于其他原因使用 font-size:62.5% 也无可厚非,完全可以在 body 中重置回你需要的默认 font-size。

OK这样就解决了。为了搞这个UC12号字体问题没想到搞出这么多名堂,感谢似水流年给的建议,感谢UED淘宝的响应式参考文献。


本文转载自:http://blog.xmaoseo.com/response-rem-for-uc-browser-12th-pt-feasibility-solution/

共有 人打赏支持
P
粉丝 0
博文 3
码字总数 0
作品 0
深圳
私信 提问
CSS_相对单位rem

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之...

喵王不瞌睡
2016/03/18
73
0
移动端自适应布局&微信小程序rpx

rpx是微信小程序推出的一个新单位,通过rpx可以让我们的页面根据屏幕宽度进行自适应,这一举措解决了一直令前端头疼的屏幕适配问题。 而在rpx出现之前,web页面的自适应布局已经有前人总结了...

小草先森
2018/06/16
0
0
真的,移动端尺寸自适应与dpr无关

前言 做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解,希望能解除你的担忧。 1. 什么...

changli2018
2018/06/28
0
0
响应式方案调研及前端开发管理思考

网易首页响应式风格实现技术调研 网易首页实现页面(字体)响应式风格的方式是在不同尺寸的视口中使用不同的容器类,如图 1所示。当视口大于等于1420px时,使用大尺寸容器类 (index20171200...

浩瀚动酷
2018/06/27
0
0
rem是如何实现自适应布局的?

摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。 rem这是个低调的css单位,近一两年开始崭露...

临江仙卜算子
2018/06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

区块链时代的拜占庭容错:Tendermint (七)

原文题目:《Tendermint: Byzantine Fault Tolerance in the Age of Blockchains》 原文作者:Ethan Buchman 本文为节选 软件实现 Tendermint采用Go语言实现,代码在https://github.com/tend...

万向区块链
5分钟前
0
0
日志分级输出到指定文件

log4j.properties文件 #根设置,输出级别为DEBUG级别, 输出文件为 ERRORA,stdout,DEBUGAlog4j.rootLogger=DEBUG,ERRORA,stdout,DEBUGA#过滤掉spring框架下的额外日志#log4j.category...

嘴角轻扬30
11分钟前
0
0
Hash源码分析(JDK1.7和1.8的对比)

前言 HashMap 在 Java 和 Android 开发中非常常见 而HashMap 1.8 相对于 HashMap 1.7 更新多 今天,我将通过源码分析HashMap 1.8 ,从而讲解HashMap 1.8 相对于 HashMap 1.7 的更新内容,希望...

瑞查德-Jack
11分钟前
0
0
Amino——表现层

一、Amino 整体视觉感受 Amino采用的主题色是神秘的蓝紫色,搭配白色图标和文字,其他图标、按钮、卡片等采用饱和度较高的亮色,整体风格活泼灵动。蓝紫色给人一种神秘感,好比陌生人之间的社...

铸剑为犁413
13分钟前
0
0
日志服务与SIEM(如Splunk)集成方案实战

背景信息 目标 本文主要介绍如何让阿里云日志服务与您的SIEM方案(如Splunk)对接, 以便确保阿里云上的所有法规、审计、与其他相关日志能够导入到您的安全运维中心(SOC)中。 名词解释 LOG(S...

阿里云官方博客
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部