rem 与 em 的核心区别及使用场景

一、核心区别对比

特性	em	rem
参照基准	当前元素或父元素的 `font-size`	根元素（ `<html>` ）的 `font-size`
计算方式	层级叠加（可能受多层继承影响）	始终基于根字体大小，无层级影响
作用范围	局部相对单位	全局相对单位
典型应用	组件内部间距、字体大小微调	布局尺寸、响应式整体缩放

二、计算规则详解

em 的计算逻辑

字体属性： 1em = 父元素的 font-size
其他属性（如 padding / margin ）： 1em = 当前元素的 font-size

css

.parent { font-size: 20px; }
.child {
  font-size: 0.8em;    /* 16px (20px × 0.8) */
  padding: 2em;        /* 32px (16px × 2) */
}

rem 的计算逻辑

所有属性统一基于 <html> 的 font-size

css

html { font-size: 16px; }
.box {
  width: 10rem;  /* 160px */
  margin: 2rem;  /* 32px */
}

三、使用场景推荐

推荐使用 em 的场景

组件内部样式

css

/* 按钮组件：字体与间距按比例缩放 */
.button {
  font-size: 1.2em;      /* 继承父级字体 */
  padding: 0.8em 1.5em;  /* 基于自身字体大小 */
}

媒体查询内的微调

css

@media (max-width: 768px) {
  .text { font-size: 0.9em; } /* 在父级基础上缩小 */
}

推荐使用 rem 的场景

全局布局与响应式设计

css

/* 根字体随屏幕宽度变化 */
html { font-size: clamp(14px, 1vw, 16px); }

.container {
  max-width: 120rem;  /* 自适应计算 */
  padding: 2rem;      /* 统一比例缩放 */
}

保持尺寸一致性

css

.card {
  margin-bottom: 1rem; /* 所有卡片间距统一 */
  font-size: 1rem;     /* 避免嵌套导致字体混乱 */
}

四、实战技巧与避坑指南

em 的嵌套陷阱

css

/* 多层嵌套导致尺寸指数级增长 */
ul { font-size: 0.8em; } 
/* 子级 ul 的字体为 0.8 × 父级 ul 的字体 */

rem 的基准重置

css

/* 默认 1rem = 16px，修改需谨慎 */
html { font-size: 62.5%; } /* 1rem = 10px (16px × 0.625) */

混合使用策略

css

.article {
  font-size: 1.2rem;     /* 全局基准 */
  line-height: 1.6em;    /* 根据当前字体动态调整行高 */
}

五、总结

em：适合组件级相对调整，需注意嵌套影响
rem：适合全局布局与响应式，保持比例一致性
最佳实践：
- 使用 rem 定义布局尺寸（宽度 / 间距）
- 使用 em 定义文本相关属性（字体 / 行高）
- 通过 html { font-size: 62.5%; } 简化 rem 计算（1rem = 10px）