一. 專案中配置postcssrc.js，同時安裝好對應的外掛

module.exports = {
  "plugins": {
    "postcss-import": {}， //解決@import引入路徑問題
     "postcss-url": {}, //該外掛主要用來處理檔案，比如圖片檔案、字型檔案等引用路徑的處理.
    "autoprefixer": {}, //自動處理瀏覽器字首，不用在一個個加字首啦
    "postcss-write-svg": { //移動端1px解決方案
      utf8: false
    },
    "postcss-aspect-ratio-mini": {}, //處理元素容器 
    "postcss-px-to-viewport": {
      viewportWidth: 750, // 視窗的寬度，對應的是我們設計稿的寬度，一般是750.
      viewportHeight: 1334, // 視窗的高度，根據750裝置的寬度來指定，一般指定1334，也可以不配置
      unitPrecision: 3, // // 指定`px`轉換為視窗單位值的小數位數（很多時候無法整除）
      viewportUnit: 'vw', // 指定需要轉換成的視窗單位，建議使用vw
      selectorBlackList: ['.ignore', '.hairlines','.line-a','.line-b','.line-c'], //指定不轉換為視窗單位的類，可以自定義，可以無限新增,建議定義一至兩個通用的類名。
      minPixelValue: 1, // 小於或等於`1px`不轉換為視窗單位，你也可以設定為你想要的值
      mediaQuery: false // 允許在媒體查詢中轉換`px`
    },
    "postcss-viewport-units":{}， // 給css新增content的屬性，配合viewport-units-buggyfill庫解決適配問題.
  }
}
 

二. 在HTML檔案中引入viewport-units-buggyfill庫中的兩個js檔案，並呼叫它們

<script> 
    window.onload = function () { 
        window.viewportUnitsBuggyfill.init({ 
            hacks: window.viewportUnitsBuggyfillHacks 
        }); 
    } 
</script>

三. 全域性設定image{ content：normal !important }

配置完以上就可以直接用px單位敲程式碼了，在自己實際使用中體驗很不錯，但也碰到些問題，如下：

        ::after和::before  : content如果設定了內容，那麼結果不會如我所願，如果設定content:''，那就沒事

        對圖片轉base64處理時也會出錯。。。

詳情跳轉大漠部落格： https://www.w3cplus.com/mobile/vw-layout-in-vue.html