postcss-px-to-viewport 的使用

安裝：

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

 

在根目錄下創建 postcss.config.js文件並進行配置

module.exports = {
    plugins: {
        autoprefixer: {}, //給不同的瀏覽器添加前綴
        "postcss-px-to-viewport": {
            unitToConvert: 'px', //需要轉換的單位
            viewportWidth: '750', //視窗的寬度，對應設計稿的寬度 理想視口寬度為375  （高清屏一個點為兩個像素）
            viewportHeight: '1334',//視窗的高度，對應設計搞的高度
            viewportUnit: 'vw',//轉換的視窗單位
            selectorBlackList: ['TabBarItem'], // 指定不需要轉換的類
            minPixelValue: 1,//小於或者等於1px 不轉換
            mediaQuery: false,//是否允許媒體查詢中轉換px
            unitPrecision: 5,//轉換后的精度，即小數點
        }
    }
}

參數說明：

• unitToConvert (String) 要轉換的單位，默認為 px。
• viewportWidth （數字）視口的寬度。
• unitPrecision (Number) 允許 vw 單位增長到的十進制數。
• propList （數組）可以從 px 更改為 vw 的屬性。
  • 值需要完全匹配。
  • 使用通配符 * 啟用所有屬性。例子： ['*']
  • 在單詞的開頭或結尾使用 *。([' position '] 將匹配 background-position-y)
  • 用 ！不匹配屬性。示例：['*', '!letter-spacing']
  • 將“not”前綴與其他前綴組合在一起。示例：[' ', '!font ']
• viewportUnit （字符串）預期單位。
• fontViewportUnit （字符串）字體的預期單位。
• selectorBlackList （數組）要忽略並保留為 px 的選擇器。
  • 如果 value 是字符串，它會檢查選擇器是否包含字符串。
    • ['body'] 會匹配 .body-class
  • 如果 value 是 regexp，它會檢查選擇器是否與 regexp 匹配。
    • [/^body$/]將匹配body但不匹配.body
• minPixelValue （數字）設置要替換的最小像素值。
• mediaQuery （布爾值）允許在媒體查詢中轉換 px。
• replace （布爾值）替換包含 vw 的規則而不是添加回退。
• exclude （正則表達式或正則表達式數組）忽略一些文件，如“node_modules”
  • 如果值為正則表達式，將忽略匹配文件。
  • 如果值為數組，則數組的元素為正則表達式。
• include(Regexp or Array of Regexp) 如果include設置，則只轉換匹配的文件，例如只轉換src/mobile/( include: /\/src\/mobile\//) 下的文件
  • 如果值為正則表達式，匹配的文件將被包含，否則將被排除。
  • 如果值為數組，則數組的元素為正則表達式。
• landscape（布爾值）@media (orientation: landscape)與通過landscapeWidth.
• landscapeUnit（字符串）landscape選項的預期單位
• landscapeWidth （數字）橫向的視口寬度。

exclude和include可以一起設置，取兩條規則的交集。