背景

• 舊的rem適配方案（無論是直接使用rem，還是配合flexiblejs等lib庫進行視口縮放）已經疲態盡顯，且隨著安卓高清屏的不斷出現，同時data-dpr仍有進一步增加的可能性，rem顯得並不是那麼穩固與稱心如意。

• 首先截止至發文日期，viewport的相容性如下：
  
  可以看到，viewport的相容性支援已經變得非常好，因此有機會拋棄一切外接庫，直接使用原生的viewport。就像最早使用sublime到現在的vscode，都需要重新配置外掛px2rem, 換了編輯器，換了環境，開發就會變得很陌生。再加上不同外掛快捷鍵觸發條件也不同，這就給原本就很煎熬的前端開發又增加了複雜度。好在postcss出現了，它允許我們用更加徹底（相比less和scss而言）的程式設計思維或者說面向物件的思維去對css做預處理。

• 回到px轉vw的問題上，解決此問題可以使用與postcss官方相容的外掛 postcss-px2vw-pv 解決：

• 官方文件： https://github.com/pomelott/postcss-px2vw-pv

• 此外掛使用全新的置換單位pv，用postcss自動對各種複雜css樣式做計算與轉換，而不必在開發過程中再考慮各種快捷鍵、編輯器外掛以及轉換配置等。

安裝

    npm i postcss-px2vm-pv -D

    yarn add postcss-px2vw-pv --dev

配置選項

    module.exports = {
        plugins: [
            require('postcss-px2vw-pv')
        ]
    }

快速使用

• 首先新增postcss至開發環境中，此處不做贅述，不明白的可上postcss官方檢視。
• 例如：

    module.exports = {
        plugins: [
            require('postcss-px2vw-pv')({
                  width: 1080
            })
        ]
    }
 

• 然後對postcss-px2vw-pv進行配置，或使用預設配置項也可。
• 例如一個div的寬度是 ’500px‘， 那麼你可以使用 ’500pv‘ 進行替換，外掛會根據設計稿寬度自動計算並生成新的css樣式。

小例子

• 在750寬度的設計稿下， 使用500px的寬度， 10px的橫向位移

    .box {
        width: 500pv;
        transform: translateX(10pv);
    }

• 生成的最終樣式如下：

    .box {
        width: 66.666667vw;
        transform: translateX(1.333333vw);
    }