1,npm install postcss-pxtorem --save-dev 安装postcss-pxtorem
2,配置文件配置:找到根目录下的.postcssrc.js 输入以下配置
module.exports = { plugins: { autoprefixer: {}, "postcss-pxtorem": { "rootValue": 32, "propList": ["*"], // 注意:如果有使用第三方UI,则需要配置下忽略选择器不转换。 // 规则是class中包含的字符串,如vantui中所有的class前缀都是van-。也可以是正则。 "selectorBlackList": ["van-"] } }, };
3,新建rem.js 内容如下:
const baseSize = 32 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。 const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } setRem() window.onresize = function () { setRem() } 在main.js页面引用 import './assets/js/rem'
4,重启项目