vue移动项目关于rem方案的适配

基本原理：

1. rem是一个相对单位，相对于根元素html的font-size的大小
2. 通过屏幕跨度自动变化font-size值，凡是使用到rem单位的地方都会进行重新计算

基本操作：

1. 安装 postcss-pxtorem

$ npm install postcss-pxtorem --save-dev

2. 安装 amfe-flexible

$ npm i amfe-flexible -S

注：--save-dev 或 -D 开发依赖; --save 或 -S 生产依赖

3. main.js 中引入 amfe-flexible

import 'amfe-flexible'

4. 根目录下新建 postcss.config.js，并进行配置

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 37.5, // 标准UI2倍图   ( 1rem = 37.5px )
            propList: ['*'], // 一个存储哪些将被转换的属性列表   ( '*'代表全部 )
            unitPrecision: 5, // rem保留小数位
        }
    }
}

问题分析：

此时启动项目会报错

原因：安装的postcss-pxtorem版本过高，安装5.1.1版本就好。

npm i postcss-pxtorem@5.1.1

适配结果：