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
         }
       }
     }
   
   }