關於將px轉換為vw vh的解決方案

什么是vw(Viewport Width)和vh（Viewport Height）？
　　vw和vh是前端開發中的一個動態單位，是一個相對於網頁視口的單位。
　　系統會將視口的寬度和高度分為100份，1vw占用視口寬度的百分之一，1vh占用視口高度的百分之一。
　　vw、vh和百分比不同的是，百分比永遠都是以父元素為參考，而vw、vh是以視口作為參考。

　　結論：vw、vh是一個動態的單位，會隨着視口的變化而變化（相對單位）。

我個人在做Vue項目的時候，一邊想用vw、vh進行布局，一邊又覺得px布局方便，因為藍湖上邊的切圖是直接有視圖的px大小。

所以就想如果有一個方案可以解決px轉換為vw vh就太好不過了，我這邊是直接在.postcssrc.js里邊進行配置，下邊是我的代碼，大家可以參考一下，有問題請指出問題

1. npm i postcss-px-to-viewport -D
2. 在項目根目錄下添加.postcssrc.js文件
3. 添加如下配置：

const path = require('path');

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

  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
      unitToConvert: "px", // 要轉化的單位
      viewportWidth: designWidth, // 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 // 是否處理橫屏情況
      }
    }
  }

}

添加完配置之后需要重新運行

這個方案可以在我的Vue項目中直接把px單位轉換為vw、vh