移動端適配方案之postcss-px-to-viewport

安裝

通過npm添加

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

用法

默認選項：

{
  unitToConvert: 'px',
  viewportWidth: 320,
  unitPrecision: 5,
  propList: ['*'],
  viewportUnit: 'vw',
  fontViewportUnit: 'vw',
  selectorBlackList: [],
  minPixelValue: 1,
  mediaQuery: false,
  replace: true,
  exclude: [],
  landscape: false,
  landscapeUnit: 'vw',
  landscapeWidth: 568
}

• unitToConvert 要轉換的（字符串）單位，默認為px。

• viewportWidth （數字）視口的寬度。

• unitPrecision （數字）允許大眾單位增加的十進制數字。

• 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”

  • 如果值為regexp，將忽略匹配文件。
  • 如果value是array，則數組的元素為regexp。

• landscape（布爾值）@media (orientation: landscape)與通過轉換的值相加landscapeWidth。

• landscapeUnit（字符串）landscape選項的預期單位

• landscapeWidth （數字）用於橫向定向的視口寬度。