vueCli3 移動端px自動轉換vw適配

-D （開發依賴）

postcss-import

postcss-url

cssnano-preset-advanced

-S （開發、運行都依賴）

postcss-aspect-ratio-mini

postcss-px-to-viewport
postcss-write-svg
postcss-cssnext
cssnano
postcss-viewport-units

安裝

yarn add postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --save

yarn add cssnano-preset-advanced postcss-url postcss-import -D

 

在postcss.config.js文件對新安裝的PostCSS插件進行配置：

module.exports = {
    "plugins": {
      "postcss-import": {},
      "postcss-url": {},
      // 使用postcss的插件實現vw適配移動端
      // 由於cssnext和cssnano都具有autoprefixer,事實上只需要一個，所以把默認的autoprefixer刪除掉，然後把cssnano中的autoprefixer設置爲false
      'postcss-aspect-ratio-mini': {}, // 用來處理元素容器寬高比
      'postcss-write-svg': { // 用來處理移動端1px的解決方案
        uft8:false
      },
      'postcss-cssnext': {}, // 讓項目使用CSS未來特性 並對其做兼容性處理
      'postcss-px-to-viewport': {
        viewportWidth: 750, // 視窗的寬度，對應我們設計稿的寬度，一般是750
        viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，一般指定1334，也可以不配置
        unitPrecision: 3, // 指定'px'轉換爲視窗單位值得小數位數（很多時候無法整除）
        viewportUnit:'vw', // 指定需要轉換成的視窗單位,建議使用vw
        selectorBlackList: ['.ignore','.hairliness'], // 指定不轉換爲視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名
        minPixelValue: 1, // 小於或等於`1px`不轉換爲視窗單位，你也可以設置爲你想要的值。
        mediaQuery: false // 允許在媒體查詢中轉換`px`
      },
      'postcss-viewport-units': {}, // 給CSS的屬性添加content的屬性 配合viewport-units-buggyfill解決個別手機不支持vw
      'cssnano': { // 壓縮和清理CSS代碼
        preset: 'advanced',
        autoprefixer: false,
        'postcss-zindex': false
      }
    }
  }

postcss-cssnext:其實就是cssnext。該插件可以讓我們使用CSS未來的特性，其會對這些特性做相關的兼容性處理。

cssnano:主要用來壓縮和清理CSS代碼。在Webpack中，cssnano和css-loader捆綁在一起，所以不需要自己加載它,在cssnano的配置中，使用了preset: advanced，所以我們需要另外安裝：

cnpm i cssnano-preset-advanced --save-dev

postcss-px-to-viewport:要用來把px單位轉換爲vw、vh、vmi n或者vmax這樣的視窗單位，也是vw適配方案的核心插件之一。

postcss-aspect-ratio-mini:主要用來處理元素容器寬高比。

postcss-write-svg:插件主要用來處理移動端1px的解決方案。該插件主要使用的是border-image和background來做1px的相關處理。

注意，如果在項目中使用了ui框架，可能會出現框架ui組件顯示變小的問題，這是由於vw轉換時將框架單位也轉換成vw單位，解決的方案有以下幾種。

1.改寫框架的ui組件的css樣式，也是比較簡單的方法。
2.在postcss.config.js中的selectorBlackList選項中增加不需要vw轉換的類名，

 

selectorBlackList: ['.ignore', '.hairlines']

 

vw兼容方案: 兼容個別手機

• 主要使用viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js，只需要在你的HTML文件中引入這兩個文件。比如在Vue項目中的index.html引入它們
• <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>
• 在HTML文件中調用viewport-units-buggyfill

<!--使用viewport-units-buggyfill解決個別手機不支持vw-->
<script>
  window.onload = function () {
    window.viewportUnitsBuggyfill.init({
      hacks: window.viewportUnitsBuggyfillHacks
    });
  }
</script>