vue项目适配移动端 配置步骤
1.使用插件pxtorem把px转化为rem
安装: npm install lib-flexible
2.在main.js中引入 import ‘lib-flexible/flexible.js’
3.安装插件 npm install postcss=pxtorem
4,在package.json中添加以下配置
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 75, // 设计稿宽度的1/10(注: package.json中不允许添加注释)
"propList":["*"] // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部
}
}
},
5,使用postcss-px-to-viewport
安装插件 npm install postcss-px-to-viewport
在package.json中添加以下配置:
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 750,
"minPixelValue": 1
}
}
}
配置完成,新建一个div 设置宽高200px,加背景色,在浏览器中模拟不同手机下的显示情况,即可看出已适配移动端。_陶