1.首先把安裝amfe-flexible，這里使用npm install

npm i -S amfe-flexible

2.在入口文件main.js中引入

import 'amfe-flexible/index.js'

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

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

4.安裝postcss-pxtorem是一款 postcss 插件，用于將單位轉化為 rem
ps：前提是ui設計的psd圖尺寸大小是750*1334，這樣我們在iphone6的模擬機上直接使用所標注的尺寸

npm i postcss-pxtorem --save-dev

5.在package.json配置 (vant 37.5)

  "postcss": {
    "plugins": {
      "autoprefixer": {
        "browsers": [
          "Android >= 4.0",
          "iOS >= 7"
        ]
      },
      "postcss-pxtorem": {
        "rootValue": 37.5,
        "propList": [
          "*"
        ]
      }
    }
  },

或者在vue.config.js中配置（此文件需要在根目錄下新建）

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer({
            browsers: ['Android >= 4.0', 'iOS >= 7']
          }),
          pxtorem({
            rootValue: 37.5,
            propList: ['*'],
          })
        ]
      }
    }
  }
};

溫馨提示： rootValue這個配置項的數值是多少呢？？？ 通常我們是根據設計圖來定這個值，原因很簡單，便于開發。假如設計圖給的寬度是750，我們通常就會把rootValue設置為75，這樣我們寫樣式時，可以直接按照設計圖標注的寬高來1:1還原開發。（iPhone界面尺寸：320 * 480、640 * 960、640 * 1136、750 * 1334、1080 * 1920等。）

那為什么你在這里寫成了37.5呢？？？

之所以設為37.5，是為了引用像vant、mint-ui這樣的第三方UI框架，因為第三方框架沒有兼容rem，用的是px單位，將rootValue的值設置為設計圖寬度（這里為750px）75的一半，即可以1:1還原vant、mint-ui的組件，否則會樣式會有變化，例如按鈕會變小。

既然設置成了37.5 那么我們必須在寫樣式時，也將值改為設計圖的一半。