vue2中vant适配-把px都换算成rem
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 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
