Vue項目中使用vw實現移動端適配

咱們在vue移動端項目中的適配通常都採用rem，可是rem也不是能兼容全部的終端。

隨着viewport單位愈來愈受到衆多瀏覽器的支持，下面將簡單介紹怎麼實現vw的兼容問題，用vw代替rem

當咱們採用vue-cli腳手架搭建完項目，安裝全部依賴包以後，用npm run dev啓動後，在根目錄有一個 .postcssrc.js 文件，文件結構以下：

vue-cli默認已經安裝以上三個插件：

postcss-import：相關配置能夠點擊這裏。主要功有是解決@import引入路徑問題。使用這個插件，可讓你很輕易的使用本地文件、node_modules或者web_modules的文件。這個插件配合postcss-url讓你引入文件變得更輕鬆。

postcss-url：相關配置能夠點擊這裏。該插件主要用來處理文件，好比圖片文件、字體文件等引用路徑的處理。在Vue項目中，vue-loader已具備相似的功能，只須要配置中將vue-loader配置進去。

autoprefixer：用來自動處理瀏覽器前綴的一個插件。若是你配置了postcss-cssnext，其中就已具有了autoprefixer的功能。在配置的時候，未顯示的配置相關參數的話，表示使用的是Browserslist指定的列表參數，你也能夠像這樣來指定last 2 versions 或者 > 5%。

Vue-cli默認配置了上述三個PostCSS插件，但咱們要完成vw的佈局兼容方案，或者說讓咱們能更專心的擼碼，還須要配置下面的幾個PostCSS插件：

• postcss-aspect-ratio-mini
• postcss-px-to-viewport
• postcss-write-svg
  
• postcss-cssnext
  
• cssnano
• postcss-viewport-units

而後咱們安裝

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

安裝成功以後，在項目根目錄下的package.json文件中，能夠看到新安裝的依賴包

接下來在.postcssrc.js文件對新安裝的PostCSS插件進行配置：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    "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 } } }

因爲配置文件修改了，因此從新跑一下 npm run dev，而後項目就能夠看到了。

簡單介紹上面幾個插件的做用：

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-px-to-viewport：要用來把px單位轉換爲vw、vh、vmin或者vmax這樣的視窗單位，也是vw適配方案的核心插件之一。在配置中須要配置相關的幾個關鍵參數：

"postcss-px-to-viewport": {
  viewportWidth: 750,   // 視窗的寬度，對應的是咱們設計稿的寬度，通常是750 （若是咱們設置的寬度是300px，那麼編譯以後的寬度爲(300/750*100)=40vw,若是頻寬實際爲375px，那麼該元素的寬度爲（375*0.4）= 150px）
  viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，通常指定1334，也能夠不配置
  unitPrecision: 3,     // 指定`px`轉換爲視窗單位值的小數位數（不少時候沒法整除）
  viewportUnit: "vw",   // 指定須要轉換成的視窗單位，建議使用vw
  selectorBlackList: ['.ignore', '.hairlines'],// 指定不轉換爲視窗單位的類，能夠自定義，能夠無限添加,建議定義一至兩個通用的類名
  minPixelValue: 1,     // 小於或等於`1px`不轉換爲視窗單位，你也能夠設置爲你想要的值
  mediaQuery: false     // 容許在媒體查詢中轉換`px`
},

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

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