本文介绍了两种在Vue项目中结合VantUI进行移动端适配的方法。第一种利用lib-flexible和px2rem-loader，需解决VantUI默认根字体大小问题。第二种通过lib-flexible结合postcss-pxtorem实现自动转换px为rem。详细步骤包括安装相应库，配置postcss-pxtorem，并在项目中引入。参考了相关博客文章以解决适配问题。
方式一：使用 lib-flexible 和 px2rem-loader，遇到的坑，设计稿为750px，后引入vant,vantUI的根字体默认大小是37.5，看起来就是1/2，解决方法，删除main.js中vant样式的引入，在app.vue中引入vant样式
<style>
/* px2rem不能正常转换 */
@import "vant/lib/index.css";
</style>
方式二：lib-flexible + postcss-pxtorem （postcss-pxtorem可以配置过滤）
设计稿为750px，即可在代码中写px单位， 现在可以实现自动转换rem
按照以下四步则可实现：
1、安装lib-flexible：
npm i lib-flexible -S
2、安装postcss-pxtorem：
npm i postcss-pxtorem -S
3、在main.js中引入：import ‘
最低0.47元/天 解锁文章
扫一扫
446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
