em 和 rem 的区别和用法

在 CSS 中，em和rem都是相对长度单位，用于创建响应式布局，但它们的参考基准和使用场景有所不同：

定义与基准

• em：相对于父元素的字体大小进行计算，如果父元素字体大小为 16px，那么 1em = 16px
  具有继承性，嵌套层级会影响最终计算结果
• rem：相对于根元素 (html) 的字体大小进行计算，"rem" 中的 "r" 代表 "root"（根）
  如果 html 元素字体大小为 16px，那么 1rem = 16px，不受父元素或嵌套层级影响，只与根元素相关

使用示例

/* 根元素设置 */
html {
  font-size: 16px; /* 浏览器默认通常是16px */
}

.parent {
  font-size: 18px;
}

.child-em {
  font-size: 1em;   /* 相对于.parent的18px，即18px */
  width: 10em;      /* 18px × 10 = 180px */
}

.child-rem {
  font-size: 1rem;  /* 相对于html的16px，即16px */
  width: 10rem;     /* 16px × 10 = 160px */
}

嵌套场景差异

<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

html { font-size: 16px; }
.grandparent { font-size: 1.25em; } /* 20px (16×1.25) */
.parent { font-size: 1.25em; }      /* 25px (20×1.25) */
.child-em { font-size: 1.25em; }    /* 31.25px (25×1.25) - 嵌套放大 */
.child-rem { font-size: 1.25rem; }  /* 20px (16×1.25) - 始终基于根元素 */

适用场景总结！

• em 适合组件内部的相对尺寸（如按钮内的图标与文字比例），需要根据父元素大小成比例变化的元素，字体图标大小与文本保持一致
• rem 适合整体布局的尺寸控制（如容器宽度、间距），需要保持一致比例的 UI 元素，响应式设计中，通过媒体查询改变根字体大小实现整体缩放