【極致絲滑】利用postcss-px2vw-pv完全擺脫編輯器插件，靈活可控地轉換px至vw

背景

• 舊的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

配置選項

選項	類型	默認值	描述
width	number	750	設計稿像素寬度
decimal	number	4	換算後小數點後的保留位數
comment	boolean	true	是否生成插件相關注釋

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);
    }