Skip to content

Files

Latest commit

ce99fb7 · Mar 14, 2025

History

History
107 lines (92 loc) · 3.23 KB

rem、em.md

File metadata and controls

107 lines (92 loc) · 3.23 KB

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


一、核心区别对比

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

二、计算规则详解

  1. em 的计算逻辑

    • 字体属性1em = 父元素的 font-size
    • 其他属性(如 padding/margin):1em = 当前元素font-size
    .parent { font-size: 20px; }
    .child {
      font-size: 0.8em;    /* 16px (20px × 0.8) */
      padding: 2em;        /* 32px (16px × 2) */
    }
  2. rem 的计算逻辑

    • 所有属性统一基于 <html>font-size
    html { font-size: 16px; }
    .box {
      width: 10rem;  /* 160px */
      margin: 2rem;  /* 32px */
    }

三、使用场景推荐

推荐使用 em 的场景
  1. 组件内部样式
    /* 按钮组件:字体与间距按比例缩放 */
    .button {
      font-size: 1.2em;      /* 继承父级字体 */
      padding: 0.8em 1.5em;  /* 基于自身字体大小 */
    }
  2. 媒体查询内的微调
    @media (max-width: 768px) {
      .text { font-size: 0.9em; } /* 在父级基础上缩小 */
    }
推荐使用 rem 的场景
  1. 全局布局与响应式设计
    /* 根字体随屏幕宽度变化 */
    html { font-size: clamp(14px, 1vw, 16px); }
    
    .container {
      max-width: 120rem;  /* 自适应计算 */
      padding: 2rem;      /* 统一比例缩放 */
    }
  2. 保持尺寸一致性
    .card {
      margin-bottom: 1rem; /* 所有卡片间距统一 */
      font-size: 1rem;     /* 避免嵌套导致字体混乱 */
    }

四、实战技巧与避坑指南

  1. em 的嵌套陷阱

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

    /* 默认 1rem = 16px,修改需谨慎 */
    html { font-size: 62.5%; } /* 1rem = 10px (16px × 0.625) */
  3. 混合使用策略

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

五、总结

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