Vue中使px自动转rem配置 (h5适配问题)

以下方法为px自动转换rem，顾名思义，配置完成后，不用再关心rem换算等等，只需按照设计稿的px值写入即可，当你保存后PostCSS插件会自动将px转换成所配置的rem值，并且你在浏览控制台观测界面时你会发现你在代码里写的是px单位，在控制台被转换成了rem单位。

postcss 一种对css编译的工具，本身不会对css一顿操作，它通过插件实现功能。

使用amfe-flexible + postcss-pxtorem包实现px自动转换rem

1.首先下载需要的npm包

npm i amfe-flexible
npm install postcss-pxtorem -D

该插件不能转换行内样式中的 px，例如 <div style="width: 200px;"></div>

2 对文件进行额外的配置

首先在mian.js引入amfe-flexible

import 'amfe-flexible'

3.在与src文件夹平级区域创建一个为.postcssrc.js的文件
对.postcssrc.js文件进行额外配置
autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件，browsers 用来配置兼容的浏览器版本信息，但是写在这里的话会引起编译器警告。因为 VueCLI 内部已经配置了 autoprefixer 插件。

module.exports = {
    "plugins": {
      'postcss-pxtorem': {
        rootValue: 37.5,
        propList: ['*']
      }
    }
  }