postcss pxtorem 配置

postcss pxtorem 配置

// rootValue: 75, //根标签的font-size大小

// unitPrecision: 5,//转换成rem后的小数位数

// propList: ['*'],//需要转换的属性列表

// selectorBlackList: [],//则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法

// replace: true,

// mediaQuery: false,

// minPixelValue: 12 //设置小于多少尺寸将不会进行转换。

        

          
        
        
        

          

          AI 代码解读
        
      
      

.pipe(postcss([ pxtorem({

rootValue: 50,

propList: ['*'],

replace: true,

minPixelValue: 1

        

          
        
        
        

          

          AI 代码解读
        
      
      

})]))

配置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中