在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的组件，否则会样式会有变化，例如按钮会变小。
