基于vw实现移动端适配

Posted 2021-03-13 flamestudio

假如设计稿的宽度为750px

为了方便换算，如果我们让屏幕的总宽度总是等于750rem，那么1rem就相当于设计稿的1px了

则有: 100vw=750rem

即: 1rem=100vw/750=0.1333...vw

因此我们只需把根元素html的字体大小设为0.1333...vw，

然而Chrome浏览器限制最小的字体大小为12px，0.1333...vw显然在大部分移动设备上是不到12px的，

如iPhone 6的逻辑宽度为375px，0.1333...vw=375px*0.1333...%<<12px

因此我们让1rem=0.1333...vw*100=13.333...vw，突破浏览器字体大小限制的同时，也保留了10进制换算的便利性

即

html{font-size:13.33333333vw}

此时1rem就相当于设计稿中的100px，不需要借助postcss-pxtorem这类工具完成换算。

当然，下面这个代码是要有的。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">