移動端項目主要是根據屏幕大小來動態設置元素的尺寸，需要在項目中安裝兩個模塊：postcss-pxtorem和amfe-flexible。
vant組件官方說明：https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage
模塊說明：
- postcss-pxtorem 是一款 postcss 插件，用於將 px 轉化為 rem
- lib-flexible 用於設置 rem 基准值
1、安裝命令：
npm install postcss postcss-pxtorem --save-dev npm i lib-flexible
2、設置postcss
修改根目錄下的postcss.config.js 文件（如果沒有這個文件，可以手動添加一份）
// postcss.config.js module.exports = { plugins: { // postcss-pxtorem 插件的版本需要 >= 5.0.0 'postcss-pxtorem': { rootValue({ file }) {
// vant得設計稿是按照375設計的，而我們得設計稿是按照750來設計的，所以vant按37.5走，750的設計稿按75走，換算基准都是設計稿得十分之一，這是因為lib-flexible是將設計稿分為10分之一來做的適配 return file.indexOf('vant') !== -1 ? 37.5 : 75; }, propList: ['*'], }, }, };
3、引入 lib-flexible（兩種方式都行，二選一）
在main.js中引入 lib-flexible 即可
// main.js
import 'lib-flexible'
也可以在 public/index.html 文件的 <head> 標簽中引入
// public下的index.html
<script src="./node_modules/lib-flexible/index.js"></script>
4、重啟項目即可，頁面布局時正常寫 px 即可