在VUE中使用REM布局【结合postcss-pxtorem和amfe-flexible实现移动端适配】

在VUE中使用REM布局

这里是的实现思路是① 通过postcss-pxtorem 实现将px 转成rem。② 使用 amfe-flexible 插件进行 HTML 根节点的初始化。配置完这个两个插件，我们就可以优雅的使用设计稿的px来进行开发啦。具体步骤如下：

步骤：

1. 安装 postcss-pxtorem

npm install postcss-pxtorem --save-dev

2. 安装 amfe-flexible

npm install amfe-flexible --save

3. 在Vue 的main.js中引入amfe-flexible

import  'amfe-flexible';

4. 在.postcssrc.js 中配置，vue-cli3.0 的版本在postcss.config.js中配置。

module.exports = {
  "plugins": {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

基本配置就完成了，是不是很简单， rootValue 这个值可以自己配置，如果你设计稿的长度是750基数的可以将rootValue的值修改为75。