vue-cli 3.0+vant项目使用postcss-pxtorem和amfe-flexible 进行移动端适配
Rem 适配
Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具
postcss-pxtorem 是一款postcss插件，用于将单位转化为rem
lib-flexible 用于设置rem基准值
lib-flexible已经废弃会出现很多问题，用amfe-flexible进行替代
步骤
1. 安装postcss-pxtorem
$ npm install postcss-pxtorem --save-dev
2. 安装amf-flexible
$ npm i -S amfe-flexible
3.在main.js中引入amfe-flexible
$ import 'amfe-flexible'
4. 在vue.config.js中进行配置
module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ // 把px单位换算成rem单位 rootValue: 37.5, // vant官方使用的是37.5 selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项 propList: ['*'] }) ] } } },}
