Vue项目移动端的rem适配方法

此文为我个人记录笔记，日后方便学习参考。

1. rem

使用rem单位可以让设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。rem单位基于html元素字体大小，

2. 适配工具

lib-flexible

postcss-px2rem-exclude

3. lib-flexible

安装 lib-flexible：

npm install lib-flexible --save

入口 main.ts 文件中引入 lib-flexible：

import 'lib-flexible'

到此，我们已经算是完成移动端适配了；

我们先来看看 lib-flexible 源码里做了什么骚操作；

是不是恍然大悟，原来源码里会设置html的font-size为屏幕宽度除以10，也就是说1rem等于html根节点的font-size；

举个例子：一般我们的设计稿宽度（iPhone6）是 750px，此时 1rem 就相当于 75px；

这个时候你是不是就觉得可以了已经完美了，但是到你开发时你就会发现一个非常麻烦的点，设计稿给到我们的是px单位，但是我们在开发还要自己计算一下rem，又开始懵了。。。不过好在此时我们可以通过postcss-px2rem-exclude自动将 css 中的px转成rem。

4. postcss-px2rem-exclude

安装 postcss-px2rem-exclude：

npm install postcss-px2rem-exclude --save

配置 postcss.config.js 文件如下:

配置里需要注意remUnit:75这配置；这个是和lib-flexible设置html的font-size为屏幕宽度除以10要保持一致，不然会出现错乱，这里同样以宽度 750px 设计稿为标准设置的，不同的设计稿宽度对应不同的单位值。

完成以上步骤后，我们在开发时只需要将设计稿样式拷贝过来，就会自动转成rem适配。

注意：

1. 不需要进行转换rem的，在样式后面写上注释/*no*/
2. 只能转换style中的css样式，不能转换 script 标签和元素里面 css 样式

以上只是我在 Vue 项目中用到的移动端 rem 适配方法，仅供参考。