rem适配的浏览器_移动端适配rem+vw方案
原理就不讲了,之前也写过很多种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是会有一点点的偏差的,也就是包含了滚动条的宽)