1、安装插件
安装: npm install lib-flexible postcss-px2rem
2、删除public中index.html里面的meta标签
删除<meta name=‘viewport‘>
标签,flexible会自动为页面添加此标签,动态控制initial-scale,maximum-scale,minimum-scale
等属性值
3、在main.js中导入插件flexible
导入rem的js,动态设置不同屏幕的html根元素的font-sizeimport ‘lib-flexible‘
4、配置vue.config.js
devServer:{},
css:{
loaderOptions:{
css:{},
postcss:{
plugins:[
require(‘postcss-px2rem‘)({
//适配375的屏幕,设计图750中量出来的尺寸要除以2
remUnit:37.5
})
]
},
}
}