vue-cli3.0移动端屏幕适配
vm vh适配方案
npm i postcss-px-to-viewport -save -dev
配置package.json
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 750,
"minPixelValue": 1
}
}
}
配置项:
“viewportWidth”: 750, // 设计稿的宽度
“unitPrecision”: 3, // px转成vw、vh后小数点保留的位数
“minPixelValue”: 1, // 不转化为vw的最小px值
rem 适配方案
postcss-pxtorem + lib-flexible
1。yarn add lib-flexible
2。入口文件main.js中:import ‘lib-flexible/flexible.js’
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 5.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}