postcss pxtorem 配置
// rootValue: 75, //根标签的font-size大小
// unitPrecision: 5,//转换成rem后的小数位数
// propList: ['*'],//需要转换的属性列表
// selectorBlackList: [],//则是一个对css选择器进行过滤的数组,比如你设置为['fs'],那例如fs-xl类名,里面有关px的样式将不被转换,这里也支持正则写法
// replace: true,
// mediaQuery: false,
// minPixelValue: 12 //设置小于多少尺寸将不会进行转换。
.pipe(postcss([ pxtorem({
rootValue: 50,
propList: ['*'],
replace: true,
minPixelValue: 1
})]))
配置rem.js 文件
const baseSize = 50
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth / 375
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * scale) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
引入项目js中