简介
在前端开发中，px 和 em 是最常见的两种长度单位。理解它们的语义与使用场景，有助于实现更可访问、响应性更好的界面。
什么是 px？
- px（像素）是绝对单位，表示屏幕上的一个逻辑像素点（与设备像素比有关）。
- 优点：精确、直观，适合像图标边框等需要“像素级”控制的场景。
- 缺点：不随用户字体缩放或父元素字体变化而改变，若滥用会影响可访问性和响应性。
什么是 em？
- em 是相对单位，基于当前元素的字体大小：1em 等于该元素当前的 font-size。
- 如果元素没有显式 font-size，则继承父元素，所以 em 值会随着嵌套层级累积变化。
- 优点：可随上下文缩放，适合做组件内部的间距/排版，使组件随字体大小自适应。
- 缺点：嵌套时计算复杂，可能导致非预期放大/缩小。
补充：rem（根 em）
- rem 相对于根元素（通常是 html）的 font-size。相比 em，rem 更稳定，便于全局控制响应式排版。
常用转换公式与示例
- em = px ÷ 基准字体大小（通常基准为 16px）
例如：24px → 24 ÷ 16 = 1.5em
- px = em × 基准字体大小
例如：1.5em → 1.5 × 16 = 24px
示例 CSS（演示用）
```css
:root {
font-size: 16px; /* 基准（rem） */
}
/* 使用 rem 做全局尺寸 */
h1 { font-size: 2rem; } /* 32px */
/* 使用 em 做组件内部相对尺寸 */
.card { font-size: 16px; padding: 1em; } /* padding 与文字大小一致 */
.card small { font-size: 0.875em; } /* 相对 .card 的字体 */
```
实用建议（Best practices）
- 使用 rem 管理全局文本与主要断点，便于实现响应式字体（通过调整 html 的 font-size）。
- 在组件内部用 em 做内边距、间距，使组件随字体缩放。
- 对需要精确像素对齐的元素（边框、图标）可用 px。
- 避免深度嵌套导致 em 链式放大；想要稳定结果则优先 rem。
- 考虑用户可访问性：允许浏览器或用户调整字体大小，避免大量使用固定 px 导致文本不可读。
小结
px 提供精确控制，em（及 rem）提供可扩展与可访问的相对尺寸。合理搭配 rem（全局）、em（局部）与 px（像素级细节），能兼顾视觉一致性与用户体验。
