npm install --save-dev postcss-plugin-px2rem
vue.config.js
module.exports = {css: {loaderOptions: {postcss: {plugins: [require('postcss-plugin-px2rem')({rootValue: 16, //换算基数， 默认100 ，1 / fontsize(html) = x 原来的1px转为0.0625rem// unitPrecision: 5, //允许REM单位增长到的十进制数字。//propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。// propBlackList: [], //黑名单// exclude: /(node_modules)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值// selectorBlackList: [], //要忽略并保留为px的选择器// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。// mediaQuery: false, //（布尔值）允许在媒体查询中转换px。// minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0//exclude: "/node_modules/",// selectorBlackList: ['html', 'mint-', 'mt-', 'mpvue-', 'calendar', 'iconfont'], //在rem.js全局作用下 排除指定的文件的影响// propBlackList: ['border']})]}}}}
以上完成px->rem，为了某些已经以rem为单位的组件不受影响，如消息框图标，这里将rootValue设置为html默认字体大小16px（html根字体大小代表rem代表的大小，此时1rem=16px）main.js中引入rem.js，监听窗口变化，等比例改变根fontsize达到改变rem的大小
rem.js
// 设置 rem 函数function setRem() {let htmlWidth = document.documentElement.clientWidth// let htmlHeight = document.documentElement.clientHeight//得到html的Dom元素let htmlDom = document.getElementsByTagName('html')[0];// //设置根元素字体大小 937 / 16 = 58.5625 ， 937是谷歌1080 - 工具栏高度// htmlDom.style.fontSize = (htmlHeight / 58.5625) + 'px';//设置根元素字体大小 1920 / 16 = 120htmlDom.style.fontSize = (htmlWidth / 120) + 'px';}// 初始化setRem();// 改变窗口大小时重新设置 remwindow.onresize = function () {setRem()}
