vue中用postcss-px-to-viewport实现px-vw转化

vue中用postcss-px-to-viewport实现px-vw转化

1.安装postcss-px-to-viewport

yarn add -D postcss-px-to-viewport

2.创建postcss.config.js并配置

module.exports = {
  parser: false,
  sourceMap: false,
  plugins: {
    'autoprefixer':true, //低版本安卓css识别不了，开启可以自动转换让低版本识别的css
    'cssnano': {},
    "postcss-px-to-viewport": {
      viewportWidth: 375, //视窗的宽度，对应的是我们设计稿的宽度
      viewportHeight: 667, //视窗的高度，对应的是我们设计稿的高度(也可以不配置)
      unitPrecision: 5, //指定‘px’转换为视窗单位的小数位数(很多时候无法取整)
      viewportUnit: 'vw', //指定需要转换成得视窗单位，建议使用vw
      selectBlackList: ['ignore', 'tab-bar'], //指定不需要转换的类
      minPixelValue: 1, //小于或等于‘1px’不转换为视窗单位
      mediaQuery: false, //允许在媒体查询中转换'px'
      exclude: [/TabBar\.vue$/] //这里必须是正则，匹配文件：exclude中存放的元素必须是正则表达式
    }
  }
}

git地址：postcss-px-to-viewport