1.背景

在做移動端各種尺寸螢幕的適配時，用的最多的就是rem方案。我們都寫過這樣的程式碼,來設定根字型大小。這個計算公式中裝置寬度，UI設計稿尺寸這兩個引數比較好理解，可是為什麼要除以100呢，為什麼不是10,50或者其它的數值呢。

  const setRem = () => {
    const deviceWidth = document.documentElement.clientWidth;
    // 獲取相對UI稿，螢幕的縮放比例
    const rem = (deviceWidth *100) / 750;
    // 動態設定html的font-size
    document.querySelector('html').style.fontSize =  rem + 'px';
  };
 

查了一番資料才得知，rem方案是viewport的過渡方案，除以100是模擬viewport的100vw這個單位，當時瀏覽器對viewport的支援性不好，而現在已經是2022年了，可以看到，各大瀏覽器廠商，對viewport的支援率已經很高了。可以放心使用。

2. 相對於rem的優勢

• 語義化更好, rem從本義上來說，是一種字型單位，不是用來做佈局和各種螢幕尺寸大小適配的，如上面的示例，用rem做適配單位，計算根字型的時候，計算公式中的100這個引數讓人感覺很費解，viewport詞更達意。
• 可以直接在程式碼中書寫px,藉助postcss-px-to-viewport外掛轉換成vw單位，完美適配移動端各種螢幕尺寸。不用像之前那樣，一是要在藍湖上設定根字型基準尺寸，將設計稿標註的px單位轉換成rem單位，然後摘抄到程式碼中。二是需要用js計算設定根字型大小。前端開發天然喜歡px單位，像rem,em,vw，vh這些單位，一般都不是UI設計稿標註的尺寸，
  開發時需要轉換成本。不如直接在程式碼中寫px直觀高效。

3.postcss-px-to-viewport方案正確的使用姿勢

看到網上的教程都是說要在專案中安裝postcss-px-to-viewport工具包，然而安裝和配置完postcss-px-to-viewport之後，執行專案，發現命令列出現如下報錯：

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration

說安裝的postcss-px-to-viewport已經過時了，遷移指南參考https://evilmartians.com/chronicles/postcss-8-plugin-migration，點進入一看，根本找不到配置px轉vw單位的方法。後面經過一番嘗試之後，最終找到了正確的使用方法。

3.1 安裝postcss-px-to-viewport-8-plugin

yarn add -D postcss-px-to-viewport-8-plugin

3.2 在專案下建立postcss.config.js

module.exports = {
  plugins: {
    'postcss-px-to-viewport-8-plugin': {
      unitToConvert: 'px', // 需要轉換的單位，預設為"px"
      viewportWidth: 750, // 設計稿的視口寬度
      unitPrecision: 5, // 單位轉換後保留的精度
      propList: ['*'], // 能轉化為vw的屬性列表
      viewportUnit: 'vw', // 希望使用的視口單位
      fontViewportUnit: 'vw', // 字型使用的視口單位
      selectorBlackList: [], // 需要忽略的CSS選擇器，不會轉為視口單位，使用原有的px等單位。
      minPixelValue: 1, // 設定最小的轉換數值，如果為1的話，只有大於1的值會被轉換
      mediaQuery: false, // 媒體查詢裡的單位是否需要轉換單位
      replace: true, //  是否直接更換屬性值，而不新增備用屬性
      exclude: [/node_modules/], // 忽略某些資料夾下的檔案或特定檔案，例如 'node_modules' 下的檔案
      include: [/src/], // 如果設定了include，那將只有匹配到的檔案才會被轉換
      landscape: false, // 是否新增根據 landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
      landscapeUnit: 'vw', // 橫屏時使用的單位
      landscapeWidth: 1338, // 橫屏時使用的視口寬度
    },
  },
};

4 效果演示

在專案中直接寫px,執行專案之後，可以看到px已經轉換成vw單位了

#app{
  width:100px
}

需要注意的是：postcss-px-to-viewport 對內聯css樣式，外聯css樣式，內嵌css樣式有效，對js動態css無效。 所以要動態改變css展示效果的話，要使用靜態的class定義變化樣式，通過js改變dom元素的class實現樣式變化。