# css中的单位em和rem的区别 最近在前端开发中反复遇到一个问题：`em`和`rem`这两个长度单位到底该如何选择？它们的名称如此相似，实际应用场景却大相径庭。起初，我常因混淆二者导致布局错位或样式调试耗时，直到近日系统梳理后，才逐渐摸透了它们的脾气。以下结合实践，记录我的理解与使用心得。 ## 先明确本质：em与rem的核心差异 ### em：基于父元素的相对单位 `em`的定义是“相对于当前元素的字体大小（font-size）”。若未显式设置当前元素的字体大小，则会向上继承父元素的字体大小进行计算。 举个例子： ```css .parent { font-size: 20px; } .child { padding: 1em; /* 计算值为 20px × 1 = 20px */ } ``` 若父元素的字体大小改变，所有依赖`em`的子元素尺寸会随之联动。但需注意，**嵌套层级过深时，em的计算可能因多层继承变得复杂**。例如： ```css .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）的设计更简单直接——**始终以根元素（``）的字体大小为基准**。无论元素嵌套多深，`rem`的计算仅依赖根元素的`font-size`。 示例： ```css :root { /* 根元素 */ font-size: 16px; /* 默认值，可自定义 */ } .box { margin: 1.5rem; /* 计算值为 16px × 1.5 = 24px */ } ``` 即使`.box`被包裹在多层其他元素中，其`margin`仍按根元素的16px计算，稳定性极强。这一特性让`rem`在全局布局中极具优势。 ## 使用场景：何时选em，何时选rem？ ### 推荐使用em的场景 1. **组件内部的相对缩放** 当某个组件的样式需要随自身字体大小同步调整时，`em`能保持比例协调。例如按钮组件： ```css .btn { font-size: 1rem; /* 基础字体设为根元素的1倍 */ padding: 0.75em 1.5em; /* 内边距随字体大小变化 */ border-radius: 0.25em; /* 圆角同样随字体缩放 */ } ``` 若后续调整`.btn`的`font-size`（如改为1.1rem），其内边距和圆角会自动按比例放大，保持视觉一致性。 2. **行高的相对控制** 行高（`line-height`）通常需要与当前字体大小匹配，此时`em`更直观： ```css p { font-size: 1rem; line-height: 1.6em; /* 行高为 1rem × 1.6 = 16px × 1.6（假设根字号16px） */ } ``` ### 推荐使用rem的场景 1. **全局布局与间距** 页面的整体布局（如容器宽度、模块间距）适合用`rem`，因为它锚定根元素，修改根字号即可全局调整。例如： ```css .container { max-width: 70rem; /* 70 × 根字号 = 1120px（假设根字号16px） */ margin: 0 auto; } ``` 若希望页面在小屏设备上收缩，只需调整根字号： ```css @media (max-width: 768px) { :root { font-size: 14px; } /* 所有rem单位自动缩小 */ } ``` 2. **响应式字体** 结合媒体查询调整根字号，可实现全站字体的响应式变化： ```css :root { font-size: 16px; } @media (min-width: 1200px) { :root { font-size: 18px; } /* 大屏字体略大 */ } ``` ## 实践中的经验总结 - **避免深层嵌套中使用em**：除非明确需要逐层缩放，否则深层嵌套的`em`可能导致计算复杂、难以调试。 - **统一根元素基准**：项目中建议在`:root`显式设置根字号（如16px），避免依赖浏览器默认值，提升可控性。 - **组合使用更高效**：布局用`rem`保证全局一致性，组件内部细节（如内边距、圆角）用`em`实现相对缩放，兼顾灵活与稳定。 ## 写在最后 最初觉得`em`和`rem`不过是“差个字母”的小区别，实际用起来才明白，它们的设计逻辑对应了不同的需求场景。如今再写样式，我会先判断：这个尺寸需要随父元素变化吗？还是全局统一调整？答案往往直接指向该用`em`还是`rem`。 技术细节的厘清，总能让人在编码时多一分笃定。希望这些思考能帮到同样在单位选择上困惑的朋友——毕竟，理清工具的脾气，才能让它更好地为需求服务。 **小记**：调试时可善用浏览器开发者工具，在“计算样式”面板查看`em/rem`的实际计算值，快速定位问题。