1.首先是依賴/插件的安裝

Vue-cli新建項(xiàng)目后,默認(rèn)配置了PostCSS插件，但我們要完成vw的布局兼容方案，還需要配置下面的幾個(gè)PostCSS插件：

postcss-aspect-ratio-mini

postcss-px-to-viewport

postcss-write-svg

postcss-cssnext

cssnano

postcss-viewport-units

要使用這幾個(gè)插件，先要進(jìn)行安裝：

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

安裝成功之后，在項(xiàng)目根目錄下的package.json文件中，可以看到新安裝的依賴包：

"dependencies": {
    "cssnano": "^3.10.0",
    "postcss-aspect-ratio-mini": "0.0.2",
    "postcss-cssnext": "^3.1.0",
    "postcss-px-to-viewport": "0.0.3",
    "postcss-viewport-units": "^0.1.3",
    "postcss-write-svg": "^3.0.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
},

cssnano

然后是cssnano的補(bǔ)充安裝
cssnano主要用來壓縮和清理CSS代碼。在Webpack中，cssnano和css-loader捆綁在一起，所以不需要自己加載它。

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

"cssnano": {
    autoprefixer: false,
    "postcss-zindex": false
}

上面的代碼把a(bǔ)utoprefixer和postcss-zindex禁掉了。前者是有重復(fù)調(diào)用，后者會導(dǎo)致css的zIndex失效,只要啟用了這個(gè)插件，z-index的值就會重置為1。這是一個(gè)天坑，千萬記得將postcss-zindex設(shè)置為false。

postcss-px-to-viewport

postcss-px-to-viewport插件主要用來把px單位轉(zhuǎn)換為vw、vh、vmin或者vmax這樣的視窗單位，也是vw適配方案的核心插件之一。

在配置中需要配置相關(guān)的幾個(gè)關(guān)鍵參數(shù)：

      "postcss-px-to-viewport": { 
          viewportWidth: 375,      // 視窗的寬度，對應(yīng)的是我們設(shè)計(jì)稿的寬度，一般是750
          viewportHeight: 667,    // 視窗的高度，根據(jù)750設(shè)備的寬度來指定，一般指定1334，也可以不配置
          unitPrecision: 5,        // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)（很多時(shí)候無法整除）
          viewportUnit: 'vw',      // 指定需要轉(zhuǎn)換成的視窗單位，建議使用vw
          selectorBlackList: ['.ignore', '.hairlines'],  // 指定不轉(zhuǎn)換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個(gè)通用的類名
          minPixelValue: 1,       // 小于或等于`1px`不轉(zhuǎn)換為視窗單位，你也可以設(shè)置為你想要的值
          mediaQuery: false       // 允許在媒體查詢中轉(zhuǎn)換`px`
      },

整合起來的.postcssrc.js文件內(nèi)容配置如下,大家安裝完上面所有依賴后,可直接替換成當(dāng)前內(nèi)容即可,詳情請看注釋:

module.exports = {
  "plugins": {
      "postcss-import": {},
      "postcss-url": {},
      "postcss-aspect-ratio-mini": {},
      "postcss-write-svg": {
          utf8: false
      },
      "postcss-cssnext": {},
      "postcss-px-to-viewport": {
          viewportWidth: 375,      // 視窗的寬度，對應(yīng)的是我們設(shè)計(jì)稿的寬度，一般是750
          viewportHeight: 667,    // 視窗的高度，根據(jù)750設(shè)備的寬度來指定，一般指定1334，也可以不配置
          unitPrecision: 5,        // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)（很多時(shí)候無法整除）
          viewportUnit: 'vw',      // 指定需要轉(zhuǎn)換成的視窗單位，建議使用vw
          selectorBlackList: ['.ignore', '.hairlines'],  // 指定不轉(zhuǎn)換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個(gè)通用的類名
          minPixelValue: 1,       // 小于或等于`1px`不轉(zhuǎn)換為視窗單位，你也可以設(shè)置為你想要的值
          mediaQuery: false       // 允許在媒體查詢中轉(zhuǎn)換`px`
      },
      "postcss-viewport-units": {
          filterRule: rule => rule.selector.indexOf('::after') === -1 && rule.selector.indexOf('::before') === -1 && rule.selector.indexOf(':after') === -1 && rule.selector.indexOf(':before') === -1
      },
      "cssnano": {
          "preset": [
              "advanced",{
                  autoprefixer:false,
                  zindex: false,
              }
          ]
      }
  }
}

至此配置好了,下面說說使用效果和一些注意點(diǎn):

2.使用效果

那么我們就可以根據(jù)設(shè)計(jì)圖上的px值直接轉(zhuǎn)換成對應(yīng)的vw值。在實(shí)際中不需要進(jìn)行任何的計(jì)算，直接在代碼中寫px，比如：

.test {
    border: .5px solid black;
    border-bottom-width: 4px;
    font-size: 14px;
    line-height: 20px;
    position: relative;
}

編譯出來的CSS：

.test {
    border: .5px solid #000;   /*像素大于1px才會被轉(zhuǎn)換*/
    border-bottom-width: .533vw;
    font-size: 1.867vw;
    line-height: 2.667vw;
    position: relative;
}

在不想要把px轉(zhuǎn)換為vw的時(shí)候，首先在對應(yīng)的元素（html）中添加配置中指定的類名.ignore或.hairlines(.hairlines一般用于設(shè)置border-width:0.5px的元素中)：

<div class="box ignore"></div>
<style lang="less" scoped>
.ignore {
    margin: 10px;
    background-color: red;
}
.box {
    width: 180px;
    height: 300px;
}
.hairlines {
    border-bottom: 0.5px solid red;
}
</style>

編譯出來的CSS:

.box {
    width: 24vw;
    height: 40vw;
}
.ignore {
    margin: 10px; /*.box元素中帶有.ignore類名，在這個(gè)類名寫的`px`不會被轉(zhuǎn)換*/
    background-color: red;
}
.hairlines {
    border-bottom: 0.5px solid red;
}

謝謝大家瀏覽到這里! 處理好移動端vw適配問題后,也許我們還需要使用公共樣式less方便之后樣式的維護(hù),有興趣或者有需要的請繼續(xù)查看我另一篇簡書 App.vue引入全局公共樣式common.less

--by Affandi ⊙▽⊙