起因 ：因为公司原有项目中都是使用px进行布局，很多时候会造成不同机型ui出现问题，寻求解决方案使用 postcss-pxtorem进行px转rem进行优化
1.安装插件
npm install postcss-pxtorem -D
*特别注意 如果vue项目是用vue-cli3+版本搭建，正常添加依赖，启动项目不会报错。如果使用vue-cli2版本搭建项目，需要降低postcss-pxtorem版本 使用 npm i postcss-pxtorem@5.1.1 启动就不会报错，一定注意，因为webpack版本问题吧。
2.新建或者修改.postcssrc.js文
在package.json同级别创建文件
2.在.postcssrc.js中添加如下代码
module.exports = {
"plugins":
"autoprefixer": {
browsers: ['Android >= 4.0', 'iOS >= 7'] },
"postcss-pxtorem":
"rootValue": 16, //下面详细解释
"propList": ['*']
}
}
}
rootValue： 代表根元素字体大小或根据input参数返回根元素字体大小
我这里设置16是因为我的项目中之前写的ui都是按2倍图尺寸除2设计的尺寸，如果你是新项目，建议建议设计32，这样UI图是多少，直接用多少，方便开发
propLis：t（ 数组） 接受一个可以从 px 更改为 rem 的属性
3.创建一个rem.js文件，并在main.js引入，用于更改屏幕尺寸改变后更新 html 的font-size属性，
rem.js如下
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
最后 重启项目 如下图配置完成
有疑问欢迎提意见，共同进步。
