vant学习踩坑记录4 vant 组件移动端适配

vant 组件的 css 样式是用 px 单位写的, 如果不转换成 rem , 那 vant 组件的样式就不能随不同屏幕宽度的变化而改变

解决方法

用自己的样式覆盖和修改 vant 源文件, 都是吃力不讨好, 既费时, 下次可能还要重复工作

因此用插件来做这件事就势在必行了, vant 官网就有推荐

不过我安装的时候, 总是报错, 根据网上的经验, 应该是有插件版本过高, 不过找不出是哪一个

所以我按照另一个分享的方法, 其他基本不变, 就是插件换了一下

链接: https://www.cnblogs.com/changxue/p/11322855.html

安装之后还是有报错, 我根据网上的经验降低了一下版本

下面是最后正常的版本

“postcss”: “^8.0.0”
“autoprefixer”: “^8.0.0”
“postcss-pxtorem”: “^5.1.1”
“amfe-flexible”: “^2.2.1”

如果设计稿的 font-size 不是 37.5px , 可以改变 vue.config.js 文件中的 rootValue: 37.5