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值啦