vue2+vant开发H5项目如何将单位px转换成vw--postcss插件

用vue2框架搭建的H5项目，如何使页面自适应不同的屏幕呢?目前主流的是使用插件postcss-px-to-viewport来自动将px单位转换成vw。
一、首先，我们创建项目的时候，就要下载插件

yarn add postcss-px-to-viewport@1.1.1 -D
或者
npm i postcss-px-to-viewport@1.1.1 -D

二、然后直接在项目文件夹创建postcss.config.js文件

module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    }
  }
};

viewportWidth:设计稿的视口宽度

1. vant-ui中的组件就是按照375的视口宽度设计的；
2. 恰好项目中的设计稿也是按照375的视口宽度设计的，所以此时 我们只需要配置375就可以了；
3. 如果设计稿不是按照375而是按照750的宽度设计，那此时这个值改怎么填呢？
   只需要加上以下代码即可：

注意：

• 这里使用path.join(‘node_modules’, ‘vant’)是因为适应不同的操作系统；
• 在mac下结果为node_modules/vant，而在windows下结果为node_modules\vant

module.exports = ({ file }) => {
  const designWidth = file.dirname.includes("'node_modules', 'vant'") ? 375 : 750;

  return {
    plugins: {
      "postcss-px-to-viewport": {
        viewportWidth: designWidth,
      },
    },
  };
};

或者设置忽略/node_modules/文件

 exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配

注意：

• propList:
  当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如propList: [“*”,“!letter-spacing”],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的
• selectorBlackList：
  转换的黑名单，在黑名单里面的我们可以写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: [‘wrap’],它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换