vue适配移动端px转rem
1.npm install postcss-pxtorem --save
2.新建一个rem.js的文件,输入以下代码即可,然后在main.js中引用
let basesize=32;
function setRem(){
let scale=document.documentElement.clientWidth /750;
document.documentElement.style.fontSize=(basesize*Math.min(scale,2))+'px';
}
setRem();
window.onresize=function(){
setRem();
}
3.在项目的根目录下找到.postcssrc.js文件在文件内添加以下代码,一般750px的设计稿的根元素大小设置32.
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"]
}
}
}