在 CSS 中，选择合适的单位对于实现响应式设计和易用性至关重要。

px、em 和 rem 是最常用的三个长度单位，它们的主要区别在于参考基准的不同。

1. px (Pixel - 像素)

px 是一个绝对单位（在屏幕显示器上）。它代表屏幕上的一个物理像素点。

  • 特点：固定大小，不会随浏览器设置或父元素字体大小改变。
  • 优点：精确、容易控制，适合需要"像素级"对齐的场景（如边框线、小图标）。
  • 缺点：缺乏灵活性，不便于响应式布局。如果用户在浏览器中放大字体，使用 px 定义的布局可能不会随之调整。

2. em (Relative to Element - 相对单位)

em 是一个相对单位，它的参照物是当前元素或父元素的字体大小 (font-size)。

  • 计算规则：
  • 如果用在 font-size 上，参照的是父元素的字体大小。
  • 如果用在其他属性上（如 width、padding、margin），参照的是当前元素自身的字体大小。
  • 缺点：复合叠加效应。如果嵌套多层且都使用 em，计算会变得非常复杂。

举例：
如果父元素是 20px，子元素设置 font-size: 1.5em;，那么子元素的实际大小就是 。

3. rem (Root em - 根相对单位)

rem 也是一个相对单位，但它只参照根元素（即 <html> 标签）的字体大小。

  • 计算规则：无论元素嵌套多深，1rem 始终等于 <html> 的 font-size。
  • 优点：
  • 可预测性高：避开了 em 的叠加嵌套问题。
  • 响应式友好：只要修改 html 的字体大小，整个页面的 rem 布局都会等比例缩放。
  • 默认值：大多数浏览器的默认根字体大小是 16px，因此默认情况下 1rem = 16px。

核心区别对比表

单位 类型 参照物 适用场景
px 绝对单位 物理屏幕像素 边框、阴影、不需要缩放的元素
em 相对单位 当前/父元素字体大小 局部组件缩放（如按钮边距随文字大小变化）
rem 相对单位 <html> 根元素字体大小 整体页面布局、间距、响应式排版

总结与建议

  1. 首选 rem 用于排版和布局：这能确保用户调整浏览器字体大小时，你的网页能优雅地缩放。
  2. 次选 px 用于固定细节：例如 1px 的边框线，不希望它因为缩放而变得模糊或消失。
  3. 少选 em 仅用于局部：当某个元素的 Padding 或 Margin 必须随着该元素文字大小同步缩放时（例如自适应按钮），才考虑使用 em。

一个小技巧：
为了方便计算，很多开发者会将 html 的字体大小设为 62.5%（即 ）。这样在写代码时，1.4rem 就直接对应 14px，简单直观。