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样式