移动端适配方案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.

你可能感兴趣的:(移动端,移动端适配方案)