postcss-px-to-viewport 的使用

安装：

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

 

在根目录下创建 postcss.config.js文件并进行配置

module.exports = {
    plugins: {
        autoprefixer: {}, //给不同的浏览器添加前缀
        "postcss-px-to-viewport": {
            unitToConvert: 'px', //需要转换的单位
            viewportWidth: '750', //视窗的宽度，对应设计稿的宽度 理想视口宽度为375  （高清屏一个点为两个像素）
            viewportHeight: '1334',//视窗的高度，对应设计搞的高度
            viewportUnit: 'vw',//转换的视窗单位
            selectorBlackList: ['TabBarItem'], // 指定不需要转换的类
            minPixelValue: 1,//小于或者等于1px 不转换
            mediaQuery: false,//是否允许媒体查询中转换px
            unitPrecision: 5,//转换后的精度，即小数点
        }
    }
}

参数说明：

• 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可以一起设置，取两条规则的交集。