VW佈局

1.https://www.w3cplus.com/mobile/vw-layout-in-vue.html（先參閱該網址）

2.postcssrc（VW佈局時該文件的配置）

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    // vue-cli默認配置了下面前三個postcss插件
    //1.postcss-import的主要功能是解決@import引入路徑問題
    //引用該插件讓我們輕易使用本地文件，node_modules或者web_modules文件
    //配合postcss-url讓引入文件變得更輕鬆
    "postcss-import": {},


    //2. 該插件主要用來處理文件，比如圖片文字，字體文件等引用路徑的處理
    // 在Vue項目中，vue-loader已具有類似的功能，只需要配置中將vue-loader配置進去
    "postcss-url": {},


    // to edit target browsers: use "browserslist" field in package.json

    //3. 該插件是用來自動處理瀏覽器前綴的一個插件
    //"autoprefixer": {},


    // 要完成vw的佈局兼容方案，需要自己配置下面的幾個postcss插件
    // postcss-aspect-ratio-mini
    // postcss-px-to-viewport
    // postcss-write-svg
    // postcss-cssnext
    // cssnano
    // postcss-viewport-units

  "postcss-aspect-ratio-mini": {},

    // 以下配置根據項目實際情況作調整
    "postcss-px-to-viewport":{
      viewportWidth: 750,      //視口寬度，對應的是我們設計稿的寬度，一般是750
      //viewportHeight: 1334,    //視口高度，根據750設備的寬度來指定，一般指定1334，也可以不配置
      unitPrecision: 3,        //單位精度
      viewportUnit: 'vw',      //單位名稱
      selectorBlackList: ['.ignore', '.hairlines','.van-',/^(.van)/,/^(.igno)/], //擁有該類名的元素保留px單位
      minPixelValue: 2,        //小於或等於`1px`不轉換爲視窗單位，你也可以設置爲你想要的值
      mediaQuery: false        //允許在媒體查詢中轉換`px`
    },
    "postcss-write-svg":{
      utf8: false
    },
    // 特別聲明：由於cssnext和cssnano都具有autoprefixer,事實上只需要一個，所以把默認的autoprefixer刪除掉，然後把cssnano中的autoprefixer設置爲false。
    "postcss-cssnext":{},

    "cssnano": {
      // 這裏用到了preset: "advanced",所以需要安裝(npm i cssnano-preset-advanced --save-dev)（之前沒有安裝，導致在此再次爬坑）,不用就註釋掉
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex":false
    },
    "postcss-viewport-units":{}
  }
};