vue-cli2項目中移動端尺寸適配

原理

利用 flexible和 postcss-px2rem
flexible用途：
lib-flexible會自動在爲你添加meta name="viewport"的標籤，同時會自動設置html的font-size爲屏幕寬度除以10，也就是1rem等於html根節點的font-size。
postcss-px2rem：
postcss-px2rem會將你代碼中的px轉換爲rem

安裝

添加依賴

npm install lib-flexible --save
npm install postcss-px2rem --save

設置html meta代碼

在根目錄的index.html 的頭部加入手機端適配的meta代碼

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

utils.js中添加轉換規則

remUnit的設置，就是1rem=37.5px，設置 1rem等於html根節點的font-size，如果根據設計稿開發，需要考慮UI給的幾倍圖

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5
    }
  }