基于vue-cli3在vue中实现rem布局：postcss-pxtorem+amfe-flexible实现移动端适配

在vue中实现rem布局：postcss-pxtorem+amfe-flexible实现移动端适配

环境参数：vue-cli 3.4.1

安装postcss-pxtorem

npm install postcss-pxtorem --save-dev
cnpm install postcss-pxtorem --save-dev

安装amfe-flexible

cnpm i -S amfe-flexible

注意一下-S的位置，至少我安装的时候cnpm i amfe-flexible --save-dev这样安装有很多警告，下面的指令就很正常的安装了

根目录index.html修改

在根目录的index.html 的头部加入手机端适配的meta代码

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

在main.js引入amfe-flexible

路径一般是根目录/src/main.js

import 'amfe-flexible/index.js'

postcss-pxtorem配置

在根目录的.postcssrc.js配置如下

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

使用

一般项目中会引用vant、mint-ui这样的第三方UI框架，因为第三方框架没有兼容rem，单位使用px，将rootValue的值设置为设计图宽度75的一半，即可以1:1还原vant、mint-ui的组件，否则会样式会有变化，例如按钮会变小。