CSS中em单位和rem单位的计算方式区别

在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、行高等）；

基本上就这些。理解清楚两者的基准差异，再根据实际项目需要选择合适的单位，就能更自如地掌控页面的视觉一致性。

以上就是CSS中em单位和rem单位的计算方式