vue移動端自適應插件postcss-px-to-viewport

一般我們做vue移動端項目使用的長度單位是rem、em，需要根據設計稿寬度進行計算，而這個插件可以配置相應屬性直接按照原始設計稿長度進行構建，不需要繁瑣的單位換算。

安裝：

npm install postcss-px-to-viewport --save

安裝完成后在vue根目錄下找到".postcssrc.js"文件，添加下面的配置：

"postcss-px-to-viewport":{
    viewportWidth: 750, // 視窗的寬度，對應的是我們設計稿的寬度，一般是750.
    viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，一般指定1334.
    unitPrecision: 3, // (指定`px`轉換為視窗單位值的小數位數（很多時候無法整除). 
    viewportUnit: 'vw', // 指定需要轉換成的視窗單位，建議使用vw. 
    selectorBlackList: ['.ignore', '.hairlines','weui'], // 指定不轉換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名.
    minPixelValue: 1, // 小於或等於`1px`不轉換為視窗單位，你也可以設置為你想要的值. 
    mediaQuery: false // 允許在媒體查詢中轉換`px`.
 }

tips：selectorBlackList屬性用作繞開計算指定類名的樣式，若項目中有使用其他ui組件時需配置ui常用類名。