px、em、rem 理解

pax大约 2 分钟

CSS 单位详解：px、em、rem

1. px (像素)

定义：px 是 CSS 中的绝对单位，表示屏幕上的一个物理像素点
特点：
- 固定大小，不会随其他元素变化
- 精确控制元素尺寸
- 在不同设备上显示效果一致
使用场景：
- 适合精确布局设计
- 图标、边框等需要固定尺寸的元素

.example {
  font-size: 16px;
  width: 200px;
  border: 1px solid #000;
}

2. em (相对单位)

定义：em 是相对于当前元素的字体大小的单位
特点：
- 相对于父元素的 font-size
- 1em 等于当前元素的字体大小
- 如果未设置，则继承父元素的字体大小
计算规则：
- 子元素的 1em = 父元素的 font-size
- 可能出现复合计算，较复杂

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* 16px × 1.5 = 24px */
  margin: 2em;       /* 24px × 2 = 48px (基于自身字体大小) */
}

3. rem (根元素相对单位)

定义：rem 是相对于根元素（html元素）字体大小的单位
特点：
- 统一基准：始终相对于 <html> 元素的 font-size
- 避免嵌套计算的复杂性
- 更容易预测和控制
优势：
- 一致性好
- 易于维护和调试
- 适合响应式设计

html {
  font-size: 16px;
}

.header {
  font-size: 1.5rem; /* 16px × 1.5 = 24px */
  padding: 1rem;     /* 16px × 1 = 16px */
}

.sidebar {
  font-size: 1.2rem; /* 16px × 1.2 = 19.2px */
  margin: 2rem;      /* 16px × 2 = 32px */
}

4. 三者对比总结

特性	px	em	rem
类型	绝对单位	相对单位	相对单位
基准	自身像素	父元素字体大小	根元素字体大小
计算复杂度	无计算	可能嵌套计算	简单统一
响应式支持	弱	中等	强
适用场景	精确定位	局部相对布局	整体布局

5. 实际应用建议

px：用于需要固定尺寸的元素，如边框、图标、精确控制的布局
em：适合局部组件内部的相对布局，如按钮内文字与padding的关系
rem：适合整体页面的响应式设计，便于统一调整页面缩放

/* 推荐的组合使用方式 */
html {
  font-size: 16px; /* 设置基准 */
}

.container {
  width: 80rem;     /* 使用rem控制整体宽度 */
  padding: 20px;    /* 使用px控制固定间距 */
}

.text {
  font-size: 1.2rem; /* 使用rem控制字体大小 */
  margin: 1.5em;     /* 使用em控制相对于字体的间距 */
}