项目的px单位如何转化vw单位

使用 postcss-px-to-viewport，一步搞定。话不多说，直接上菜。

---

安装：  npm install postcss-px-to-viewport --save-dev

安装后在根目录下会创建 postcss.config.js文件（没有的可以自己创建）

postcss.config.js进行配置：

module.exports ={
  plugins:{
    autoprefixer:{},  //给不同的浏览器添加前缀
    "postcss-px-to-viewport":{
      viewportWidth:375, //视窗的宽度，对应的是我们设计稿的宽度
      // viewportHeight:667,//视窗的高度，对应的是我们设计稿的高度(也可以不配置)
      unitPrecision:3, //指定'px'转换为视窗单位值的小数位数(很多时候无法整除)
      viewportUnit:'vw',//指定需要转换成的视窗单位，建议使用vw
      minPixelValue:1,//小于或者等于'1px'不转换为视窗单位
      mediaQuery:false,//允许在媒体查询中转换'px'
      
      // selectorBlackList:['tabBar','tabBaritem'],//指定不需要转换的类，或者在不需要转换的，写的时候后面多跟一个类名
      exclude:[/tabbar/]
    }
  }
}

参数说明：

• unitToConvert (String) 要转换的单位，默认为 px。
• viewportWidth （数字）视口的宽度。
• unitPrecision (Number) 允许 vw 单位增长到的十进制数。
• 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”
  • 如果值为正则表达式，将忽略匹配文件。
  • 如果值为数组，则数组的元素为正则表达式。
• include(Regexp or Array of Regexp) 如果include设置，则只转换匹配的文件，例如只转换src/mobile/( include: //src/mobile//) 下的文件
  • 如果值为正则表达式，匹配的文件将被包含，否则将被排除。
  • 如果值为数组，则数组的元素为正则表达式。
• landscape（布尔值）@media (orientation: landscape)与通过landscapeWidth.
• landscapeUnit（字符串）landscape选项的预期单位
• landscapeWidth （数字）横向的视口宽度。

exclude和include可以一起设置，取两条规则的交集。

---

原文地址：https://www.cnblogs.com/yjh-bl/p/15428389.html

描述如有错误，欢迎指正！