基于vw实现移动端适配

时间:2022-10-16 17:59:02

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