react 手机app_简单粗暴的 Vue/React 项目移动端适配方案

作者：前端小黑

链接：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根据不同手机型号计