作者:前端小黑
链接:https://juejin.im/post/5d5cd14951882546282363b6
前言
本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率。
下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案。
px2rem或postcss-px2rem
在移动端中,为了设配不同的设备,通常使用 rem 来做适配。
rem是通过根元素进行适配的,网页中的根元素指的是
,我们通过设置
的字体大小就可以控制 rem 的大小(1rem = 1根元素字体大小)。
可见,只要我们根据不同屏幕(使用css媒体查询或js)设定好根元素
的字体大小,其他已经使用了 rem 单位的元素就会自适应显示相应的尺寸。
设计稿一般是按照一种特定设备型号(如iphone6)为基础且以 px 单位来定义样式,为了让设计稿能够通用在不同的设备型号中,则存在着从px到 rem 的繁琐计算转化过程,因此需要更加科学的方式来使用 rem 单位。
px2rem
或postcss-px2rem
的原理:将css中 px 编译为 rem,配合js根据不同手机型号计