移动端适配方案postcss-px-to-viewport

做移动端适配可以用viewport单位，postcss-px-to-viewport可将px单位自动转换成viewport单位。

1）利用npm安装postcss-px-to-viewport

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

2）配置文件：postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 默认值`px`，需要转换的单位
      viewportWidth: 750,//视窗的宽度，对应的是我们设计稿的宽度
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,//指定`px`转换为视窗单位值的小数位数，默认是5(很多时候无法整除)
      viewportUnit: 'vw',//指定需要转换成的视窗单位，建议使用vw
      fontViewportUnit: 'vw', //指定字体需要转换成的视窗单位，默认vw;
      selectorBlackList: ['.ignore'],//指定不转换为视窗单位的类 
      minPixelValue: 1,// 小于或等于`1px`不转换为视窗单位
      mediaQuery: false,// 允许在媒体查询中转换`px`，默认false
      exclude:[/node_modules/], //如果是regexp, 忽略全部匹配文件;如果是数组array, 忽略指定文件.
    }
  }
}

其它参数解析：

• propList (Array) 指定可以转换的css属性，默认是[’*’]，代表全部属性进行转换

  • 精确匹配;
  • *代表全部属性;
  • 在字符串前面或者后面用*，如 [’*position*’] 会匹配background-position-x;
  • 用！则该属性排除. 如: [’*’, ‘!letter-spacing’]
  • Combine the “not” prefix with the other prefixes. Example: [’’, ‘!font’]

• selectorBlackList (Array) 指定不转换为视窗单位的类，保留px，值为string或正则regexp，建议定义一至两个通用的类名;

  • 值为string类型， 检查字符是否包含（[‘body’] 匹配 .body-class）;
  • 值为regexp类型，正则匹配([/^body$/] 匹配 body 而不是 .body)；

• replace (Boolean) replaces rules containing vw instead of adding fallbacks.