假如设计稿的宽度为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">