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组件是否适配

具体步骤

1. 下载postcss和 postcss-pxtorem@5.1.1

   postcss作用: 是对css代码做降级处理

   postcss-pxtorem: 自动把所有代码里的css样式的px, 自动转rem

npm i postcss postcss-pxtorem
1

2. src/新建postcss.config.js,放入下面的代码：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 能够把所有元素的px单位转成Rem
      // rootValue: 转换px的基准值。
      // 例如一个元素宽是75px，则换成rem之后就是2rem。
      rootValue: 37.5,
      propList: ['*']
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11

以iphone6为基准, 37.5px为基准值换算rem

3. 重启服务器：
   这个时候我们发现换不同的设备都有适配效果了，因为，已经把原来项目中的px都换算成了rem，随着视口的宽度而改变！

下面是ipad截图：

4. 如果下载postcss和 postcss-pxtorem@5.1.1后出现这样的报错，那么就是版本和webpack不兼容，跟换版本后就可以了：

<!-- 例如把版本换成这个！ -->
npm i postcss postcss-pxtorem@5.1.1
1
2

写在最后

✨个人笔记博客✨

星月前端博客
http://blog.yhxweb.top/

✨原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️评论，你的意见是我进步的财富！