移动端项目主要是根据屏幕大小来动态设置元素的尺寸，需要在项目中安装两个模块：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 即可