postcss-px-to-viewport

之前做移动端适配时,基本上是采用rem方案,现在发现了一个新的方案,就是用viewport单位,现在viewport单位越来越受到众多浏览器的支持

postcss-px-to-viewport,将px单位自动转换成viewport单位,用起来超级简单,postcss-px-to-viewport 文档

1.安装

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

2.引入vue项目,再postcss.config.js引入

module.exports = {

  plugins: {

    autoprefixer: {},

    'postcss-px-to-viewport': {

      viewportWidth: 750,  // 视窗的宽度,对应的是我们设计稿的宽度,一般是750

      viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置

      unitPrecision: 3,    // 指定`px`转换为视窗单位值的小数位数

      viewportUnit: "vw",  //指定需要转换成的视窗单位,建议使用vw

      selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名

      minPixelValue: 1,    // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值

      mediaQuery: false    // 允许在媒体查询中转换`px`

    }

  }

}

参数解析

{

  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  (String) 要转换的单位,默认是'px'

viewportWidth (Number) viewport的宽度,默认是320,可根据设计稿来,750的设计稿就写750

unitPrecision  (Number) 指定`px`转换为视窗单位值的小数位数,默认是5

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

精确匹配

* 代表全部属性

在字符串前面或者后面用*,如 ['*position*'] 会匹配background-position-y

用!则该属性排除. 如: ['*', '!letter-spacing']

Combine the "not" prefix with the other prefixes. Example: ['', '!font']

viewportUnit  (String)指定需要转换成的视窗单位,默认vw

fontViewportUnit  (String)指定字体需要转换成的视窗单位,默认vw

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

值为string类型, 检查字符是否包含

['body'] 匹配 .body-class

值为regexp类型,正则匹配.

[/^body$/] 匹配 body 而不是 .body

​​​​​​​minPixelValue (Number) 默认值1,小于或等于`1px`不转换为视窗单位,

mediaQuery  (Boolean) 是否在媒体查询时也转换px,默认false

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

exclude (Array or Regexp) 设置忽略文件,如node_modules

如果是regexp, 忽略全部匹配文件.

如果是数组array, 忽略指定文件.


原文链接:https://blog.csdn.net/Cookysurongbin/article/details/99671673

你可能感兴趣的:(postcss-px-to-viewport)