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()}