H5移动端适配
一、flexible方案(废弃)
早期viewport兼容性差,借助flexible方案(现在官方已不推荐此方案)
二、rem + viewport 方案(推荐)
第一步:设置viewport;
第二步:设置html的font-size
主要原理:通过设计稿和屏幕大小确定缩放比例,然后用缩放比例乘以设计稿基准字体大小,得出网页的基准字体大小
第三步:借助插件将单位px转成rem
postcss-pxtorem
三、vw + viewport 方案
设置viewport;尺寸单位借助插件转为vw(view width),此单位以设备宽度的1/100为基准
总结:
rem相比于vw方案的优点:参照物可以修改。即rm可以人为改动根元素的font-size;vw方案无法改动设备的vw
参考:
Last updated