postcss pxtorem 配置

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中