Open zhiqiang21 opened 8 years ago
请问你这个不会出现进入页面先缩小后放大的情况吗?我的代码跟你的类似,但是我的就会出现页面先缩小后放大的情况,不知道应该怎么解决。
现在用css单位vw就行,不需要写js了。@ChaseChan
@ChaseChan 哈哈,你把这段js放在Head标签里面就可以了。另外现在还是推荐的淘宝的lib-flexible 吧。https://github.com/amfe/lib-flexible
@zhiqiang21 ,我就是放在head里面的,现在比较笨的方法是计算过后再把body给展示出来。
@jawil 公司不给用,那个貌似是安卓4.4.4以上才支持,公司还要兼容老设备,唉。
不用这样的哈,检查下你的代码看不是不是Head标签还有其它的js代码,阻塞了这段代码的执行。如果有请把这段代码移到最前面的位置,或者考虑把跟业务有关的js都移到body标签的底部
2019-05-14更新
1.为什么设置font-size=62.5%
简单说下为什么要来更新这篇博客的原因吧。这篇博客计算rem的方式是自己2014年刚毕业的时候做移动端项目写的。本身这段代码没有什么问题,但是在本地开发调试(比如chrome上) 因为设置
html
根元素的font-size=62.5%
导致在chrome上使用了rem单位的容器计算出来的正常的尺寸会有偏差(实际上在移动端设备上显示的又没有问题)。这个问题的主要原因就是在pc上默认浏览器的字体最小只能显示
12px
大小的字体(当然这个说法也是指的大多数浏览器)。所以当使用这篇博客脚本的来做rem
的动态计算的时,如果元素的尺寸小于12px,在chrome上调试就会看到一个错误的容器尺寸。当时的一个简单的解决办法就是自己手动到chrome设置里面去设置chrome的可以显示的最小字体。先来看下在chrome 浏览器里面的测试效果: 第一张和第二张图分别是浏览器计算出的容器的宽度和高度,可以明显发现test1 的宽度多了
2像素
同样的代码在safari中浏览器却可以计算出正确的大小,下图可以看到test1和test2的宽度和高度是一样的。
就在我修改这篇文章的时候,chome已经是v74.0xxxx版本。通过设置chrome的最小显示字体已经无法让刚才的测试demo正常显示出计算结果了。意思就是说当我们设置跟节点的
html font-size 62.5%
时(根据 1rem=16px, 0.625rem = 10px),计算得到的是10px
,chrome也会强制的将计算结果设置为12px
。所以在浏览器中就是1rem=12px
了。下面再来简单介绍下为什么设置
font-size 62.5%
和怎么规避上面在chrome浏览器中计算误差的问题。由上面的表格可以知道当我们假设
1rem = 16px
时,那么10px=0.625rem
,所以当我们选择10px
为基准值的时候,假设我们需要设置的rem 值为 Y
,设计稿的尺寸为X
,我们可以得出一个方程式:10 * Y = 0.625 * X
也就是实际的rem设置的值就是
Y = (0.625 * X) / 10
又因为 rem 是一个相对于 html 跟节点 font-size 的一个相对值。当我们设置了根节点的 html 的
font-size 62.5%
时,需要设置的rem的值就是Y = X / 10
(这里是一倍稿,当是2倍稿时,Y=X/10*2)由以上的解析我们已经知道为什么设置
font-size 62.5%
的由来了,而且存在的问题。那么怎么规避在chrome上会计算错误的问题呢?规避这个问题的方式就是我们将基准值设置为大于chrome能够显示的最小字体
12px
。为了方便计算,如上面的表格我们可以使用100px
作为基准值。也就是设置根节点的font-size 625%
。所以当我们根据设计稿尺寸计算rem尺寸的时候直接除100
(如果是2倍稿就除2*100
)。下图可以看出来这种选择更大的基准值时,chrome浏览器可以正确的计算出元素的尺寸。
2.淘宝flexible方案解析
以上设置根节点
font-size
为百分比单位是一种使用rem适配的方案。还有一种设置font-size
为动态的像素值(px)
,比如淘宝的 lib-flexible。那么简单解释下淘宝方案的换算方法。我们都知道iphone6/7/8手机的屏幕宽度是
375px
。当我们的设计稿是以iphone6为标准输出时(假设是1倍稿),在lib-flexible
中有一句代码注释如下:它的意思就是
lib-flexible
认为1rem = viewwidth/10
,那么就有了下面的一个关系:以一倍的iphone6设计稿为标准:
当我们设置
37.5px
为基准值,也就是font-size 37.5px
时,由前面介绍的换算公式当我们要设置rem值时,就是Y = X / 37.5
(浏览器在计算的时候,实际是 37.5 * x / 37.5)2.1 lib-flexible 对0.5像素的支持
查看
lib-flexible
的源码可以看到这段js代码上面代码的意思就是检测屏幕的 dpr 是不是大于等于2,当满足条件是就在 html 根节点上添加
class="hairlines"
的属性,当我们要使用 0.5像素的时候可以这么写代码建议使用淘宝的rem 方案解决移动端适配的问题。地址:https://github.com/amfe/lib-flexible
3.字体的适配
使用
rem
我们可以控制元素在不同设备上面等比例的缩放和扩大,根据设备的dpr
可以实现真实的一像素。那么字体的大小使用什么适配呢?3.1 需不需要适配
在我的工作中(移动端项目)很少需要对字体进行适配。主要也是产品或者是UE、UI都对这里没有需求。直接使用的设计稿的
px
尺寸。3.2 需要适配怎么做
如果是需要对字体进行适配我们应该怎么做呢?
rem
3.3衬线字体和非衬线字体的区别
这里介绍个前端关于字体使用最经常使用的两个概念。
衬线体:具有装饰性(有边角);代表字体:Times New Roman。常用于印刷品(书本杂志等),适用于长篇文章段落,因为边角易于辨别每个字母,读者在阅读较多的段落时会变得轻松。
非衬线体:顾名思义就是无装饰性(无边角),易识别;代表字体:Helvetica (iOS7、iOS8的预设字体)、San Francisco(iOS9、iOS10的预设字体)、Roboto(Android L的预设字体)、Arial(windows的预设字体);缺点:某些字母相对难区分,如大些的I(i)与小写的l(L)。常用语电子设备。
旧版的博客内容(脚本内容已经更新20190514)
rem
单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题,我们需要动态的给文档的更节点添加font-size
值。使用mediaquery
可以解决这个问题,但是每一个文件都引用一大串的font-size
值很繁琐,而且值也不能达到连续的效果。就使用js动态计算给文档的
fopnt-size
动态赋值解决问题。使用的时候,请将下面的代码放到页面的顶部(head标签内);