postcss-px-to-viewport

將px單位轉換為視口單位的?(vw,?vh,?vmin,?vmax)?的?PostCSS?插件。

簡介

如果你的樣式需要做根據視口大小來調整寬度，這個插件可以將你CSS中的px單位轉化為vw，vw本質上還是一種百分比單位，100vw即等于100%，1vw等于1/100視口寬度。

安裝

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

$ yarn add -D postcss-px-to-viewport

參數配置

默認參數：

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

參數說明：

• unitToConvert?(String) 需要轉換的單位，默認為"px"
• viewportWidth?(Number) 設計稿的視口寬度
• unitPrecision?(Number) 單位轉換后保留的精度
• propList?(Array) 能轉化為vw的屬性列表
• viewportUnit?(String) 希望使用的視口單位

• selectorBlackList?(Array) 需要忽略的CSS選擇器，不會轉為視口單位，使用原有的px等單位。
  例如?selectorBlackList?為?['body']?的話， 那么?.body-class?就會被忽略

• minPixelValue?(Number) 設置最小的轉換數值，如果為1的話，只有大于1的值會被轉換
• mediaQuery?(Boolean) 媒體查詢里的單位是否需要轉換單位
• replace?(Boolean) 是否直接更換屬性值，而不添加備用屬性
• exclude?(Array or Regexp) 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
  如果值是一個正則表達式，那么匹配這個正則的文件會被忽略
  如果傳入的值是一個數組，那么數組里的值必須為正則
• include?(Array or Regexp) 如果設置了include，那將只有匹配到的文件才會被轉換，例如只轉換 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
• landscape?(Boolean) 是否添加根據?landscapeWidth?生成的媒體查詢條件?@media (orientation: landscape)
• landscapeUnit?(String) 橫屏時使用的單位
• landscapeWidth?(Number) 橫屏時使用的視口寬度

postCss配置：

module.exports?=?{
??plugins:?{
????...
????'postcss-px-to-viewport':?{
??????//?options
????}
??}
}

注意點

1. 1px不轉換
2. 行內樣式不轉換，需要將樣式寫在style標簽內轉換才能生效（坑點）
3. @keyframes?和media查詢里的px默認是不轉換的，設置mediaQuery: true則媒體查詢里也會轉換px，@keyframes可以暫時手動填寫vw單位的轉化結果

4. vant里的內置樣式也會轉換，但前提是viewportWidth設置成375才顯示正常，若設計圖是320或750，則需要修改配置才能使vant組件樣式正常展示（坑點）

參考文檔

postcss-px-to-viewport

移動端布局之postcss-px-to-viewport（兼容vant）

接入pack的項目使用postcss-px-to-viewport插件

pack支持通過參數配置使用postcss-px-to-viewport, 具體配置方式如下：

1. 打開pack根目錄下的projects.json文件
2. 在對應項目配置中添加"pxToViewport": true, 即可啟用插件
3. 在對應項目配置中添加"pxToViewportOpts":{},?即可對插件進行參數配置

實例如下圖：

?

?