vant适配-把px都换算成rem
前言
这篇文章介绍 vue2中vant适配-把px都换算成rem。
本文详细记录了所有步骤,拿来学习是真不错!
本文测试环境:
1.vue-cli 创建 vue2 项目;
2.vant 组件库;
看完不会你打我。哈哈哈,开玩笑的,不多说,上刺刀!!
*步骤:
- postcss – 配合webpack翻译css代码
- postcss-pxtorem – 配合webpack, 自动把px转成rem
- 新建 postcss.config.js – 设置相关配置
- 重启服务器, 再次观察Vant组件是否适配
具体步骤
-
下载postcss和 postcss-pxtorem@5.1.1
postcss作用: 是对css代码做降级处理
postcss-pxtorem: 自动把所有代码里的css样式的px, 自动转rem
npm i postcss postcss-pxtorem
- src/新建postcss.config.js,放入下面的代码:
module.exports = {
plugins: {
'postcss-pxtorem': {
// 能够把所有元素的px单位转成Rem
// rootValue: 转换px的基准值。
// 例如一个元素宽是75px,则换成rem之后就是2rem。
rootValue: 37.5,
propList: ['*']
}
}
}
以iphone6为基准, 37.5px为基准值换算rem
- 重启服务器:
这个时候我们发现换不同的设备都有适配效果了,因为,已经把原来项目中的px都换算成了rem,随着视口的宽度而改变!
下面是ipad截图:
- 如果下载postcss和 postcss-pxtorem@5.1.1后出现这样的报错,那么就是版本和webpack不兼容,跟换版本后就可以了:
<!-- 例如把版本换成这个! -->
npm i postcss postcss-pxtorem@5.1.1
写在最后
✨个人笔记博客✨
星月前端博客
http://blog.yhxweb.top/
✨原创不易,还希望各位大佬支持一下
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️评论,你的意见是我进步的财富!