vue-cli3.0引入px2rem與lib-flexible 移動端適配

lib-flexible

做用：讓網頁根據設備dpr和寬度，利用viewport和html根元素的font-size配合rem來適配不一樣尺寸的移動端設備
安裝：yarn add lib-flexible
引入：入口文件main.js中：import 'lib-flexible/flexible.js'

pxtorem

做用：將項目中css的px轉成rem單位，免去計算煩惱
安裝：yarn add postcss-pxtorem
配置：package.json內，在postcss內添加：

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75, // 設計稿寬度的1/10,（JSON文件中不加註釋，此行註釋及下行註釋均刪除）
        "propList":["*"] // 須要作轉化處理的屬性，如`hight`、`width`、`margin`等，`*`表示所有
     }
    }
  },

TIPS
一、pxtorem中，對於想忽略的px寫成大寫便可，諸如 border:1PX solid #fff;
二、也能夠選擇postcss-px2rem，我更喜歡pxtorem的忽略方式，方便我vscode的beautify自動格式化代碼