Vant 中的樣式默認使用px作為單位，如果需要使用rem單位，推薦使用以下兩個工具：
postcss-pxtorem 是一款 postcss 插件，用於將單位轉化為 rem;
amfe-flexible 用於設置 rem 基准值
1==> 去下載amfe-flexible 和postcss-pxtorem
"dependencies": {
"amfe-flexible": "^2.2.1",
"core-js": "^3.6.5",
"postcss-pxtorem": "^5.1.1",
"vant": "^2.12.9",
"vue": "^2.6.11",
"vue-router": "^3.2.0"
},
安裝postcss-pxtorem和amfe-flexible的時候，要注意版本，
否者可能會出現如下Error: PostCSS plugin tailwindcss requires PostCSS 8
這個因為版本出問題了，下載之后，重新下載
npm install postcss-pxtorem -D
npm install amfe-flexible -S
-D 是 --save-dev 的簡寫
–save-dev || -D //開發依賴（輔助）
--save || -S // 運行依賴（發布）
2==>通過meta標簽，設置設備寬度以及縮放比例
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
3==> 創建文件 .postcssrc.js文件，在根目錄中
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5, //vant-UI的官方根字體大小是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 那么我們必須在寫樣式時，也將值改為設計圖的一半。
如果你用的是摹客，可以切換開發平台，變成自定義，單位轉換1px=2px；
參考：https://www.jianshu.com/p/220a186cc033
4==>在main.js中去引入
import 'amfe-flexible/index.js'
我們可以看見在h5端上
我們可以看見在pc端上
