1.安装移动端适配方案---动态设置rem
npm i lib-flexible --save
2.在main.js引入lib-flexible
import 'lib-flexible/flexible'
3.安装postcss-pxtorem
npm install postcss-pxtorem -D
4.配置postcss-pxtorem
在根目录的.postcssrc.js文件中修改
此文件自动生成,若没有,手动添加
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
//vant样式根据375设计稿,其他根据750设计稿
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
//需要转化成rem的属性
propList: ['*'],
},
},
};