CSS篇：前端干货！1分钟分清rem、em、vw和%的区别✨

🎓 作者简介： 前端领域优质创作者

🚪 资源导航： ">传送门=>

🎬 个人主页： 江城开朗的豌豆

🔥 个人专栏：《VUE》 📘《JavaScript》 📚

🌐 个人网站:    江城开朗的豌豆 🌍

📧 个人邮箱:    YANG_TAO_WEB@163.com 📩

💬 个人微信:     y_t_t_t_ 📱

📌  座  右 铭:    生活就像心电图，一帆风顺就证明你挂了。💔

👥  QQ群:       906392632 (前端技术交流群) 💬

🌟 欢迎来到我的个人主页！这里是我分享技术心得和生活感悟的地方。希望你能在这里找到有价值的内容，也欢迎随时联系我交流讨论！🚀

目录

引言

1. rem（Root EM）

定义

计算方式

适用场景

示例

2. em（相对父级单位）

定义

计算方式

适用场景

示例

3. vw / vh（视窗单位）

定义

计算方式

适用场景

示例

4. 百分比（%）

定义

计算方式

适用场景

示例

5. 对比总结

6. 最佳实践建议

结语

引言

在前端开发中，CSS单位的选择直接影响页面的布局适配能力。不同的单位（如rem、em、vw/vh、%）适用于不同的场景，理解它们的计算规则和适用场景，能帮助我们更高效地实现响应式设计。本文将深入对比这些单位，并给出实际应用建议。

1. rem（Root EM）

定义

rem（Root EM）是相对于**根元素（）的font-size**计算的单位。

计算方式

• 默认情况下，浏览器根元素的font-size为16px，因此 1rem = 16px。

• 可以通过修改html的font-size来调整rem的基准值：

  html {
    font-size: 10px; /* 1rem = 10px */
  }

  适用场景

  ✅ 全局响应式布局（如移动端适配）

  ✅ 需要整体缩放的元素（如字体、间距、宽高）

  示例

  .container {
    width: 20rem; /* 20 × 10px = 200px */
    padding: 1rem; /* 10px */
  }

  ---

  2. em（相对父级单位）

  定义

  em 是相对于**父元素的font-size**计算的单位。

  计算方式

  • 如果父元素的font-size是16px，则 1em = 16px。

  • 嵌套时计算会累积，容易导致尺寸失控：

    .parent { font-size: 16px; }
    .child { font-size: 0.8em; } /* 16px × 0.8 = 12.8px */
    .grandchild { font-size: 0.8em; } /* 12.8px × 0.8 = 10.24px */

    适用场景

    ✅ 局部样式调整（如按钮内边距、图标对齐）

    ❌ 不适合多层嵌套布局（计算复杂）

    示例

    .button {
      font-size: 1em; /* 继承父级字体 */
      padding: 0.5em 1em; /* 相对父级字体计算 */
    }

    ---

    3. vw / vh（视窗单位）

    定义

    • vw（Viewport Width）：1vw = 视窗宽度的1%

    • vh（Viewport Height）：1vh = 视窗高度的1%

      计算方式

      • 如果视窗宽度是1200px，则 10vw = 120px。

      • 不受父元素影响，直接基于浏览器窗口计算。

        适用场景

        ✅ 全屏布局（如轮播图、背景图）

        ✅ 视窗比例适配（如弹窗、浮动元素）

        示例

        .fullscreen-banner {
          width: 100vw; /* 占满整个视窗宽度 */
          height: 50vh; /* 视窗高度的一半 */
        }

        ---

        4. 百分比（%）

        定义

        百分比单位是相对于父元素的对应属性计算的，不同属性的参照对象可能不同。

        计算方式

        • width: 50% → 父元素宽度的50%

        • padding-top: 50% → 参照父元素的宽度（而不是高度！）

          适用场景

          ✅ 流式布局（如栅格系统、弹性盒子）

          ✅ 依赖父级尺寸的元素（如自适应容器）

          示例

          .parent {
            width: 200px;
          }
          .child {
            width: 50%; /* 100px */
            padding-top: 25%; /* 50px（基于父元素宽度计算） */
          }

          ---

          5. 对比总结

          单位	参照对象	特点	适用场景
          rem	根元素font-size	全局可控，适合响应式	移动端适配、全局缩放
          em	父元素font-size	嵌套易混乱	局部样式（按钮、图标）
          vw/vh	视窗宽高	直接响应视窗变化	全屏布局、视窗比例适配
          %	父元素对应属性	依赖父级结构	流式布局、栅格系统

          ---

          6. 最佳实践建议

          1. 移动端适配 → rem + 媒体查询

             html {
               font-size: calc(10px + 0.5vw); /* 动态调整基准值 */
             }

          2. 全屏元素 → vw/vh

             .hero-section {
               height: 100vh;
             }

          3. 流式布局 → % + flex/grid

          4. 避免em嵌套问题 → 仅在局部使用，或改用rem

          ---

          结语

          不同的CSS单位各有优劣，理解它们的计算规则和适用场景，能让我们更灵活地实现响应式设计。建议在项目中结合rem、vw/vh和百分比，根据需求选择最佳方案。

          欢迎在评论区交流你的CSS单位使用心得！ 🚀