postcss-pxtorem

postcss-pxtorem是将px转化为rem的一个插件

rem单位是根据根节点字体大小 =>  设置根节点大小 => 动态改变rem大小

Step1：实现rem布局

Const baseSize = 32     // 基准大小

Function setRem () {
    const scale = documentElement.clientWidth / 750      //当前页面宽度相对于750宽的缩放比例
    // 设置根节点字体大小
    document.documentElement.style.fontSize = ( baseSize * Math.min(scale,2)) + ‘px’
}

setRem();   // 初始化

window.onresize = function() {
    setRem();     // 改变窗口时重新设置rem
}

Step2：

Main.js中引入文件后，可以查看根节点，查看是否有被自动添加font-size

Note:完成这一步实际上就是实现了rem布局，实际开发的时候，还是需要我们去计算对应的rem值去开发

Step3：配置webpack，自动转化px对应的rem值

配置好以后，就可以在项目中只用px开发了，例如：

Body {
    width: 750px;
    height: 1136px;
}

将自动转化为rem

实际应用中

function transferRem() {
    /* this is the foundation of the rem layout */
    const docEl = document.documentElement;
    const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    const recalc = function () {
      const { clientWidth } = docEl;
      if (clientWidth === undefined) return;
      if (clientWidth > 414) {
        docEl.style.fontSize = `${100 * (clientWidth / 1920)}px`;
        // docEl.style.fontSize = '20px';
        window.rootRate = clientWidth / 1920;
        return;
      }
      docEl.style.fontSize = `${20 * (clientWidth / 375)}px`;
    };
    recalc();
    window.addEventListener(resizeEvt, recalc, false);
    document.addEventListener('DOMContentLoaded', recalc, false);
  };

wenpack配置

rootValue为75，就是对根节点大小进行设置

unitPrecision为5，就是转换成rem后保留的小数点位数

propList是一个存储哪些将被转换的属性列表，假设需要仅对边框进行设置，可以写['*','!border*'],意思是排除带border的属性

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

mixPixelValue的意思是，设置了12，就是所有小于12px的样式都不被转化，那么border就自动保留px值啦