vue中px自动转换为rem及移动端适配

1、找到项目的.postcssrc.js,并打开 ，找到'postcss-pxtorem'下的rootValue并设置

  

"autoprefixer": {
   browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
   rootValue:16,
   propList: ['*']
}

 

2、运行命令

npm install postcss-pxtorem -D

 

 3、（我在src下新建了一个文件夹(libs)）新建文件rem.js

 

const baseSize = 32
function Rem () {
   // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    const scale = htmlWidth / 750;
    //得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
    //设置根元素字体大小
    htmlDom.style.fontSize= (baseSize * Math.min(scale,2)) + 'px';
}
// 初始化
Rem();
// 改变窗口大小时重置 rem
window.onresize = function () {
    Rem()
}

4、在main.js中引入即可（根据自己放rem.js文件的位置设置路径）

// 设置不同型号手机的根元素大小
import './libs/rem.js'