1，安裝 flexible和 postcss-px2rem（命令行安裝）
npm install lib-flexible --save
npm install postcss-px2rem --save
簡要介紹這兩個包的用途：
flexible會為頁面根據屏幕自動添加<meta name='viewport' >標簽，動態控制initial-scale，maximum-scale，minimum-scale等屬性的值。
例如在Galaxy S III:
例如在iphone6/7/8:
postcss-px2rem會將px轉換為rem，rem單位用於適配不同寬度的屏幕，根據<html>標簽的font-size值來計算出結果，1rem=html標簽的font-size值。
2, 引入lib-flexible
在項目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
注意事項（important）: 由於flexible會動態給頁面header中添加<meta name='viewport' >標簽，所以務必請把目錄 public/index.html 中的這個標簽刪除！！！
3, 配置postcss-px2rem
vue-cli3 構建的項目相較於vue-cli2 構建的項目精簡了許多，將一些默認配置進行了更好更嚴密，讓開發變得更高效的封裝。具體請看vue-cli官網 https://cli.vuejs.org/zh/guide/
px2rem的配置放在vue-cli3 項目中vue.config.js中（找不到？可能你是一個新構建的項目，需要手動在項目根目錄創建vue.config.js）
具體配置內容如下：
1 module.exports = { 2 css: { 3 loaderOptions: { 4 css: {}, 5 postcss: { 6 plugins: [ 7 require('postcss-px2rem')({ 8 remUnit: 37.5 9 }) 10 ] 11 } 12 } 13 }, 14 }
OK，重啟項目，兩個用於移動端適配的包就這樣可以愉快的開始使用了！！！
下面來看我們的代碼，代碼中我們直接用px來寫寬高：
1 .testclass { 2 width: 300px; 3 height: 200px; 4 background: #e3e3e3; 5 }
在瀏覽器中會是什么樣的呢？
沒錯，已經從px轉換成了rem。 what？如果你的沒有從px變成rem, 那么你可能需要重啟一下項目呦~
溫馨提示： remUnit這個配置項的數值是多少呢？？？ 通常我們是根據設計圖來定這個值，原因很簡單，便於開發。假如設計圖給的寬度是750，我們通常就會把remUnit設置為75，這樣我們寫樣式時，可以直接按照設計圖標注的寬高來1:1還原開發。
那為什么你在這里寫成了37.5呢？？？那我們后面專門來講！
之所以設為37.5，是為了引用像mint-ui這樣的第三方UI框架，因為第三方框架沒有兼容px2rem ，將remUnit的值設置為設計圖寬度（這里為750px）75的一半，即可以1:1還原mint-ui的組件，否則會樣式會有變化，例如按鈕會變小。
既然設置成了37.5 那么我們必須在寫樣式時，也將值改為設計圖的一半。