1.首先在專案中安裝依賴

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

2.修改.postcssrc.js的配置

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, // 容器寬度，也可以看作設計圖的寬度
      viewportHeight: 1334, // 容器高度，可以不配置
      unitPrecision: 3, // px轉換為vw後保留的小數位
      viewportUnit: 'vw', // px需要轉換成的單位，使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 不需要轉換為其他單位的的class類
      minPixelValue: 1, // 小於等於1px不轉換
      mediaQuery: false // 是否允許在媒體查詢中使用px
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}
 

因為在cssnano中配置了 preset:"advanced",所以需要新增一個依賴

npm i cssnano-preset-advanced --save-dev

3.新增全域性css

因為postcss-viewport-units會在計算vw時自動新增content內容,但是content會有一定的副作用,所以新增一個全域性的css

img {
    content: normal !important;
}

4.解決vw相容問題

在html中引用viewport-units-buggyfill外掛

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
 

然後呼叫viewport-units-buggyfill

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