Vue amfe-flexible+px2rem-loader+postcss-px2rem-exclude 界面自適應方案

最近項目是大屏+移動端的VUE開發項目，上面說也要適應PC端，但當初設計並沒有考慮這種適配，因此在不大動代碼的情況下，採用手淘的界面適配方案，剛開始查到lib-flexible，但已經不維護了，轉而採用amfe-flexible+px2rem-loader，其原理就是將px轉化爲rem,達到適配效果。

1. 安裝

    npm install px2rem-loader amfe-flexible  postcss-px2rem-exclude --save

2.配置

 在main.js中添加：

import 'amfe-flexible/index.js'

   針對於本項目，在根目錄下.postcssrc.js添加

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-px2rem-exclude": {
      remUnit: 192,
      exclude: /node_modules|mobile/i
    }
  }
}

3.參數說明

    remUnit：是基準數據，舉例：若設計稿的寬爲1920，則該數值爲192

    exclude：不對px進行轉化的目錄；舉例說明：/node_modules|mobile/i 是node_modules下的文件和mobile目錄下的文件css不進行轉化；

4.其他說明

 因爲本項目採用的了大屏和移動端兩種分辨率，而原生remUnit只能設一個，看了其他博客，適配兩種規則需要修改源碼，考慮項目維護等問題，因此退而求其次，只適配大屏，手機端界面排除在外，手機端用原來的自適應，因爲手機端庫用了element-ui等，所以node_modules下文件也需排除，否則會影響手機端界面樣式。

如果在.vue文件style中的某一行代碼不希望被轉成rem，只要在後面寫上註釋 /* no*/就可以了,或者將px寫成PX。

總結，大屏2k和4k以及PC端適配良好，還是很方便。