vue在移動端自適應vx佈局

vw佈局相信你們都只瞭解一些，1vw至關於屏幕百分之一的寬度,這裏介紹的一個方法是經過一些依賴，讓你在vue-cli開發移動端放心的使用px，原文出自https://www.w3cplus.com/mobile/vw-layout-in-vue.html，閒話很少說，上乾貨了。

首先，安裝 postcss-px-to-viewport，這玩意就是核心 看名字很容易看出用途吧，把px轉換成vw

npm install postcss-px-to-viewport --save-dev

安裝完再進行一下配置，在哪裏配置呢？就跟安裝這個包名字前面類,既postcssrc.js
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,   // 視窗的寬度，對應的是咱們設計稿的寬度，通常是750
      viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，通常指定1334，也能夠不配置
      unitPrecision: 3,     // 指定`px`轉換爲視窗單位值的小數位數
      viewportUnit: "vw",   //指定須要轉換成的視窗單位，建議使用vw
      selectorBlackList: ['.ignore', '.hairlines'],// 指定不轉換爲視窗單位的類，能夠自定義，能夠無限添加,建議定義一至兩個通用的類名
      minPixelValue: 1,     // 小於或等於`1px`不轉換爲視窗單位，你也能夠設置爲你想要的值
      mediaQuery: false     // 容許在媒體查詢中轉換`px`
    }

  }
}
複製代碼

如今就能夠把項目跑起來看看了，是否是px變成vw了呢，不過只是這樣使用，就太粗糙了，你會發現使用起來有不少問題，好比css兼容，元素容器寬高比例，僞類沒辦法轉換等等； 看來是時候掏出其餘部分了

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-cssnext postcss-viewport-units cssnano --save

天然配置也要相應增長
 "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,   // 視窗的寬度，對應的是咱們設計稿的寬度，通常是750
      viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，通常指定1334，也能夠不配置
      unitPrecision: 3,     // 指定`px`轉換爲視窗單位值的小數位數
      viewportUnit: "vw",   //指定須要轉換成的視窗單位，建議使用vw
      selectorBlackList: ['.ignore', '.hairlines'],// 指定不轉換爲視窗單位的類，能夠自定義，能夠無限添加,建議定義一至兩個通用的類名
      minPixelValue: 1,     // 小於或等於`1px`不轉換爲視窗單位，你也能夠設置爲你想要的值
      mediaQuery: false     // 容許在媒體查詢中轉換`px`
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
複製代碼

這就是這些東西的用處：

postcss-cssnext：其實就是cssnext。該插件可讓咱們使用CSS將來的特性，其會對這些特性作相關的兼容性處理。有關於cssnext的每一個特性的操做文檔，能夠點擊這裏瀏覽。

cssnano：主要用來壓縮和清理CSS代碼。在Webpack中，cssnano和css-loader捆綁在一塊兒，因此不須要本身加載它。詳細文檔能夠點擊這裏獲取。在cssnano的配置中，使用了preset: "advanced"，因此咱們須要另外安裝：

npm i cssnano-preset-advanced --save-dev
"cssnano": {
   "autoprefixer": false,
   "postcss-zindex": false
}
複製代碼

上面的代碼把autoprefixer和postcss-zindex禁掉了。前者是有重複調用，後者是一個討厭的東東。只要啓用了這個插件，z-index的值就會重置爲1。這是一個天坑，千萬記得將postcss-zindex設置爲false。 postcss-viewport-units：用來處理僞類。

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

有些人會安裝 postcss-write-svg,用來處理1px問題，可是用less的時候這個地方會有些問題，我就不介紹了。1px的問題也有不少其餘處理方法，讓你們自由發揮吧。