移动端适配方案之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 （数字）用于横向定向的视口宽度。