本文介绍了使用vw单位进行移动端rem适配的方法，包括计算公式和代码实现。当设计稿宽度为750px时，可以设置html字体大小为2.666666666666667vw或0.133333333333333vw，使得1rem对应20px或1px。注意，此方案在安卓4.4以下不支持vw单位，且在有滚动条的pc浏览器中可能存在微小偏差。
原理就不讲了,之前也写过很多种rem适配方案,有css媒体查询的,有通过js设置根字体的,可以自行搜索一下本博客的相关文章。
这个方案主要就是利用vw来设置根字体
1.以根元素是20，设计稿的宽度750px为例
计算公式为： 100vw/750*20 (750是设计稿的宽度,20为根元素)
这样得到的结果为：
html{font-size: 2.666666666666667vw;}
写代码的时候仍然以rem的方法进行编写,1rem就是20px(以750设计稿为标准)。 如果不明白,可以查看本博相关文章
2.如果为了方便计算,也可以设置为750px设计稿标准时,1px = 1rem ;也就是设计根字体为：
html{font-size: 0.133333333333333vw;}
这种方案的唯一问题就是安卓4.4以下不支持vw
如果不考虑低版本安卓兼容性问题,使用vw可以替换js设置rem方案
注意：(如果使用pc浏览器查看演示请使用手机模式,因为在pc浏览器端查看时如果出现了滚动条,滚动条的宽条是算在vw内的,这时候计算出来的rem是会有一点点的偏差的,也就是包含了滚动条的宽)
1643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
