在css中，em和rem的区别在于计算基准：em基于当前元素字体大小，rem基于根元素字体大小。具体来说：1. em的计算取决于当前元素自身字体大小，若未设置则继承父级，适用于局部比例控制但易受嵌套影响；2. rem始终以根元素（html）字体大小为基准，适合全局统一尺寸和响应式布局；3. 使用建议：局部缩放或组件内部使用em，全局控制和响应式设计使用rem，合理选择可提升布局灵活性与一致性。
在CSS中，em和rem都是相对单位，但它们的计算基准不同，导致使用场景和效果也有所区别。简单来说：
-
em是相对于当前元素的字体大小来计算的； -
rem是相对于根元素（通常是html）的字体大小来计算的。
了解它们的区别，能帮助你在布局时更灵活地控制尺寸，避免层级嵌套带来的意外放大或缩小问题。
一、em 是怎么算的？
em的计算方式依赖于当前元素自身的font-size值。如果当前元素没有显式设置字体大小，它会继承父元素的字体大小作为基准。
立即学习“前端免费学习笔记（深入）”；
举个例子：
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 计算为 20px * 1.5 = 30px */
}但如果子元素自己设置了字体大小，那它的em就基于自己的字体大小来计算了。比如：
.child {
font-size: 16px;
padding: 1em; /* 这里的1em就是16px */
}注意点：
- 在嵌套结构中，每一层都用
em的话，可能会层层放大（或缩小），容易出错。 - 使用时要特别注意当前元素的字体大小来源。
二、rem 的计算逻辑更稳定
rem的“r”代表“root”，也就是根元素。无论你在哪里使用rem，它始终以标签上设置的字体大小为基准。
通常我们会这样设置：
html {
font-size: 16px;
}
.box {
font-size: 1.25rem; /* 16px * 1.25 = 20px */
}即使.box被嵌套多深，只要根元素的字体大小不变，它的1.25rem永远是20px。
优点：
- 避免了
em可能带来的嵌套级联问题； - 更适合用于响应式设计，比如通过JavaScript动态调整根字号来适配屏幕。
三、什么时候用 em，什么时候用 rem？
这个问题其实取决于你的需求：
-
用 em 的情况：
- 希望某个元素的尺寸跟随自身字体大小变化；
- 某些组件内部样式希望与字体大小保持比例关系；
- 需要更精细地控制局部缩放（比如按钮、图标等）；
-
用 rem 的情况：
- 全局统一的尺寸控制；
- 构建响应式布局；
- 避免嵌套带来的尺寸混乱；
一个常见做法是：
- 用
rem设定全局基础尺寸（如字体、间距、容器宽高）； - 用
em处理组件内部细节（如padding、margin、行高等）；
基本上就这些。理解清楚两者的基准差异，再根据实际项目需要选择合适的单位，就能更自如地掌控页面的视觉一致性。
