Vue中使用postcss-px-to-viewport进行移动端项目开发（兼容vant）

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

开发移动端项目时，可以使用postcss-px-to-viewport，将px单位自动转换成viewport单位，用起来超级简单。

1. 安装

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

2. 引入vue项目，然后在postcss.config.js引入

   module.exports = ({ webpack }) => {
     const designWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;
     return {
       plugins: {
         autoprefixer: {},
         "postcss-px-to-viewport": {
           unitToConvert: "px",
           viewportWidth: designWidth,
           // viewportWidth: 750,  // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
         	// viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
           unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数
           propList: ["*"],
           viewportUnit: "vw", //指定需要转换成的视窗单位，建议使用vw
           fontViewportUnit: "vw",
           selectorBlackList: [], // 如['.ignore']， 可以指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
           minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
           mediaQuery: true, // 允许在媒体查询中转换`px`
           exclude: [],
           landscape: false
         }
       }
     }
   
   }