Skip to content

Files

Latest commit

camera-2018camera-2018
感谢马圣开源
Mar 14, 2025
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）