在前端学习中你会遇到一个问题：em和rem这两个长度单位到底该如何选择？它们的名称如此相似，实际应用场景却大相径庭。起初，我常因混淆二者导致布局错位或样式调试耗时，直到近日系统梳理后，才逐渐摸透了它们的脾气。以下结合实践，记录我的理解与使用心得。

先明确本质：em与rem的核心差异

em：基于父元素的相对单位

em的定义是“相对于当前元素的字体大小（font-size）”。若未显式设置当前元素的字体大小，则会向上继承父元素的字体大小进行计算。

举个例子： 

.parent {  
  font-size: 20px;  
}  

.child {  
  padding: 1em; /* 计算值为 20px × 1 = 20px */  
}

若父元素的字体大小改变，所有依赖em的子元素尺寸会随之联动。但需注意，嵌套层级过深时，em的计算可能因多层继承变得复杂。例如： 

.grandparent { font-size: 16px; }  
.parent { font-size: 1.2em; } /* 16px × 1.2 = 19.2px */  
.child { font-size: 1.2em; }  /* 19.2px × 1.2 ≈ 23.04px */

此时子元素的字体大小并非直接基于根元素，而是逐层放大，稍不注意便可能偏离预期。

rem：基于根元素的绝对相对单位

rem（Root EM）的设计更简单直接——始终以根元素（<html>）的字体大小为基准。无论元素嵌套多深，rem的计算仅依赖根元素的font-size。

示例： 

:root { /* 根元素 */  
  font-size: 16px; /* 默认值，可自定义 */  
}  

.box {  
  margin: 1.5rem; /* 计算值为 16px × 1.5 = 24px */  
}

即使.box被包裹在多层其他元素中，其margin仍按根元素的16px计算，稳定性极强。这一特性让rem在全局布局中极具优势。

使用场景：何时选em，何时选rem？

推荐使用em的场景

  1. 组件内部的相对缩放
    当某个组件的样式需要随自身字体大小同步调整时，em能保持比例协调。例如按钮组件： 

    .btn {  
  font-size: 1rem; /* 基础字体设为根元素的1倍 */  
  padding: 0.75em 1.5em; /* 内边距随字体大小变化 */  
  border-radius: 0.25em; /* 圆角同样随字体缩放 */  
}

    若后续调整.btn的font-size（如改为1.1rem），其内边距和圆角会自动按比例放大，保持视觉一致性。

  2. 行高的相对控制
    行高（line-height）通常需要与当前字体大小匹配，此时em更直观： 

    p {  
  font-size: 1rem;  
  line-height: 1.6em; /* 行高为 1rem × 1.6 = 16px × 1.6（假设根字号16px） */  
}

推荐使用rem的场景

  1. 全局布局与间距
    页面的整体布局（如容器宽度、模块间距）适合用rem，因为它锚定根元素，修改根字号即可全局调整。例如： 

    .container {  
  max-width: 70rem; /* 70 × 根字号 = 1120px（假设根字号16px） */  
  margin: 0 auto;  
}

    若希望页面在小屏设备上收缩，只需调整根字号： 

    @media (max-width: 768px) {  
  :root { font-size: 14px; } /* 所有rem单位自动缩小 */  
}

  2. 响应式字体
    结合媒体查询调整根字号，可实现全站字体的响应式变化： 

    :root { font-size: 16px; }  
@media (min-width: 1200px) {  
  :root { font-size: 18px; } /* 大屏字体略大 */  
}

实践中的经验总结

  • 避免深层嵌套中使用em：除非明确需要逐层缩放，否则深层嵌套的em可能导致计算复杂、难以调试。
  • 统一根元素基准：项目中建议在:root显式设置根字号（如16px），避免依赖浏览器默认值，提升可控性。
  • 组合使用更高效：布局用rem保证全局一致性，组件内部细节（如内边距、圆角）用em实现相对缩放，兼顾灵活与稳定。

写在最后

最初觉得em和rem不过是“差个字母”的小区别，实际用起来才明白，它们的设计逻辑对应了不同的需求场景。如今再写样式，我会先判断：这个尺寸需要随父元素变化吗？还是全局统一调整？答案往往直接指向该用em还是rem。

技术细节的厘清，总能让人在编码时多一分笃定。希望这些思考能帮到同样在单位选择上困惑的朋友——毕竟，理清工具的脾气，才能让它更好地为需求服务。

小记：调试时可善用浏览器开发者工具，在“计算样式”面板查看em/rem的实际计算值，快速定位问题。