px2vw插件使用

首先，为了适应移动端不同的屏幕分辨率改变的问题，需要对px进行vw的转化。

使用插件postcss-px-to-viewport。

一、下载插件npm install postcss-px-to-viewport --save-dev

二、对postcss.config.js进行编辑：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 375, // 视窗宽度，对应的是设计稿(iphone6)宽度
      viewportHeight: 667, // 视窗高度，对应的是我们设计稿高度（可以不配置）
      unitPrecision: 5, // 指定'px'转化为视窗单位值的小数位数（因为很多时候无法整除）
      viewportUnit: 'vw', //指定需要转化成的视窗单位
      selectorBlackList: ['ignore', 'tab-bar', 'tab-bar-item'], // 指定不需要转化的类
      minPixelValue: 1, // 小于或者等于'1px'不转成视窗单位
      mediaQuery: false, // 允许在媒体查询中转换'px'
    }
  }
}

三、重新运行项目。

四、可能出现的问题，排除转化不成功，此时需要添加额外的属性exclude:[/规则/]，进行手动排除。