vue中移動端自適應的postcss-plugin-px2rem插件

flexible

• 主要是用來響應式改變根元素的字體大小

• 安裝命令 npm install lib-flexible --save

• 在main.js里面導入命令import 'lib-flexible'

要把index.html里面的<meta name='viewport'>標簽刪除;因為會自動添加

postcss-plugin-px2rem配置內容解釋

• 安裝命令 npm i --save postcss-plugin-px2rem

• 創建一個名為vue.config.js的文件寫入

• module.exports={
  css:{
                  loaderOptions: {
                      postcss: {
                          plugins: [
                              require('postcss-plugin-px2rem')({
                                  rootValue: 37.5, //換算基數， 默認100  ，可以設置為75這樣的話把根標簽的字體規定為1rem為50px,這樣就可以從設計稿上量出多少個px直接在代碼中寫多上px了。
                                  // unitPrecision: 5, //允許REM單位增長到的十進制數字。
                                  //propWhiteList: [],  //默認值是一個空數組，這意味着禁用白名單並啟用所有屬性。
                                  // propBlackList: [], //黑名單
                                  exclude: /(node_module)/, //默認false，可以（reg）利用正則表達式排除某些文件夾的方法，例如/(node_module)\/如果想把前端UI框架內的px也轉換成rem，請把此屬性設為默認值
                                  // selectorBlackList: [], //要忽略並保留為px的選擇器
                                  // ignoreIdentifier: false,  //（boolean/string）忽略單個屬性的方法，啟用ignoreidentifier后，replace將自動設置為true。
                                  // replace: true, // （布爾值）替換包含REM的規則，而不是添加回退。
                                  mediaQuery: false, //（布爾值）允許在媒體查詢中轉換px。
                                  minPixelValue: 3 //設置要替換的最小像素值(3px會被轉rem)。 默認 0
                              }),
                          ]
                      }
                  }
              }
  }