当我们添加完vant组件库后,还需要对项目的移动端进行适配
执行 yarn add amfe-flexible 安装 amfe-flexible
安装完成后我们在 main.js 中配置 动态设置rem基准值
然后通过执行 yarn add postcss-pxtorem -D 把 postcss-pxtorem 安装到开发环境中
在项目根目录中添加 .postcssrc.js 文件,并把按照上图所示完成配置,注意:要重启项目
rootValue ({ file }) { return file.indexOf('vant') !== -1 ? 37.5 : 75 },
配置中这个选项是为了区分根据设计稿自定义样式和 vant 自带的 37.5 样式基准值,这样设置后就可以在样式中按设计稿写真实数据了
最终效果就是这样
标签:VUE,vant,基准值,样式,适配,file,amfe From: https://blog.csdn.net/m0_37618883/article/details/137045832