Rem vs Px：在现代 CSS 中何时以及如何使用每种单位

在构建响应式网站时，选择正确的 CSS 单位对于设计如何适应不同设备和用户偏好具有重要意义。关于使用 rem 和 px 单位的争论已经持续了多年，但在 2024 年的开发环境中，对于何时使用每种单位已经有了明确的指导原则。

理解 CSS 单位：绝对单位 vs 相对单位

在深入 rem vs px 比较之前，重要的是要理解这两种单位类型之间的根本区别：

绝对单位

像素（px）是 CSS 中的绝对单位。当您将元素的字体大小设置为 16px 时，它将始终是那个确切的大小，无论父元素或用户偏好如何。

.fixed-size {
  font-size: 16px;
  padding: 24px;
  width: 300px;
}

相对单位

Rem（rem）是一个相对单位，基于根元素的字体大小进行缩放。这个名称字面意思是”根 em”。默认情况下，浏览器将根字体大小设置为 16px，使 1rem 等于 16px，除非明确更改。

html {
  font-size: 16px; /* 大多数浏览器的默认值 */
}

.scalable-element {
  font-size: 1rem;    /* 默认 16px */
  padding: 1.5rem;    /* 默认 24px */
  width: 18.75rem;    /* 默认 300px */
}

Rem vs Px：核心差异

rem 和 px 单位之间的主要差异影响您的设计如何响应用户偏好和设备特性：

Rem 单位的可访问性优势

使用 rem 单位的最强论据归结为可访问性。当用户调整浏览器的默认字体大小（这是视觉障碍用户的常见做法）时，使用 rem 单位的设计将尊重这些偏好。

这里是一个简单的演示：

<div class="container">
  <p class="pixel-text">这个文本是 16px（固定大小）</p>
  <p class="rem-text">这个文本是 1rem（随偏好缩放）</p>
</div>

.pixel-text {
  font-size: 16px;
}

.rem-text {
  font-size: 1rem;
}

当用户将浏览器的默认字体大小从 16px 增加到 24px 时：

• pixel-text 保持在 16px
• rem-text 增加到 24px（1 × 24px）

这种行为对于依赖较大文本的视觉障碍用户至关重要。根据 WebAIM 对低视力用户的调查，超过 75% 的用户报告更改了浏览器的默认字体大小。

62.5% 技术：让 Rem 计算更简单

关于 rem 单位的一个常见抱怨是它们比像素更难计算。默认的 16px 根字体大小意味着常见值如：

• 10px = 0.625rem
• 12px = 0.75rem
• 14px = 0.875rem
• 20px = 1.25rem

这些小数值不如使用像素那么直观。62.5% 技术通过将根字体大小设置为 10px 来解决这个问题，使计算变得更简单：

html {
  font-size: 62.5%; /* 16px 的 62.5% = 10px */
}

.element {
  font-size: 1.6rem;  /* 16px */
  margin: 2.4rem;     /* 24px */
  padding: 0.8rem;    /* 8px */
}

使用这种方法，您可以通过简单地移动小数点来在 rem 和像素之间进行心理转换：

• 16px = 1.6rem
• 24px = 2.4rem
• 8px = 0.8rem

这种技术在使开发更直观的同时保持了可访问性优势。

何时使用 Rem 单位

Rem 单位适用于：

1. 排版

body {
  font-size: 1rem;      /* 基础字体大小 */
}

h1 {
  font-size: 2.5rem;    /* 随用户偏好缩放 */
}

h2 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
  line-height: 1.5;     /* 相对于字体大小 */
}

2. 布局间距

.container {
  max-width: 75rem;     /* 默认大小下为 1200px */
  padding: 2rem;
  margin: 0 auto;
}

.card {
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0.5rem;
}

3. 组件尺寸

.button {
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  font-size: 1rem;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
}

4. 媒体查询

/* 移动优先方法 */
.container {
  width: 100%;
}

/* 平板断点 */
@media (min-width: 48rem) {  /* 默认大小下为 768px */
  .container {
    width: 46rem;
  }
}

/* 桌面断点 */
@media (min-width: 64rem) {  /* 默认大小下为 1024px */
  .container {
    width: 60rem;
  }
}

何时使用像素单位

尽管 rem 有优势，但仍有一些情况下像素更合适：

1. 边框宽度

.card {
  border: 1px solid #ddd;  /* 边框通常在 1px 时看起来最好 */
}

2. 盒阴影

.button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* 小而精确的效果 */
}

3. 精细细节

.separator {
  height: 1px;
  background-color: #eee;
}

4. 需要像素精度的情况

.pixel-art {
  image-rendering: pixelated;
  width: 32px;
  height: 32px;
}

现代设计系统中的 Rem

主要的设计系统和框架已经在很大程度上标准化使用 rem 单位：

• Bootstrap 5 对大多数尺寸使用 rem，根字体大小为 16px
• Material UI 使用 rem 并支持 62.5% 技术
• Tailwind CSS 默认提供基于 rem 的间距比例

这种行业转变反映了对可访问性和响应式设计日益增长的重视。

实际实施策略

对于新项目，考虑这种方法：

1. 使用 62.5% 技术设置基础字体大小：

   html {
     font-size: 62.5%;
   }
   
   body {
     font-size: 1.6rem; /* 重置为 16px 等效值 */
   }

2. 对大多数属性使用 rem：

   .container {
     max-width: 120rem;  /* 1200px */
     padding: 2rem;      /* 20px */
   }

3. 对精细细节使用像素：

   .card {
     border: 1px solid #ddd;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }

4. 使用不同的浏览器字体大小进行测试以确保您的设计适当缩放。

将现有项目从 Px 转换为 Rem

如果您正在将现有项目从像素转换为 rem 单位：

1. 决定您的根字体大小策略（默认 16px 或 62.5% 技术）

2. 在预处理器中创建转换函数：

   // 使用 SCSS
   @function rem($pixels) {
     @return ($pixels / 16) * 1rem;
   }
   
   .element {
     font-size: rem(16);    // 1rem
     margin: rem(24);       // 1.5rem
     padding: rem(8) rem(16); // 0.5rem 1rem
   }

3. 从排版和布局属性开始，然后扩展到其他属性

4. 在不同设备和浏览器设置下彻底测试

常见陷阱和解决方案

1. 使用 Rem 的嵌套元素

与 em 单位不同，rem 始终引用根字体大小，因此您不需要担心嵌套元素中的复合大小：

/* 使用 em 单位（有问题） */
.parent {
  font-size: 1.2em;
}
.parent .child {
  font-size: 1.2em; /* 计算为基础字体大小的 1.44 倍 */
}

/* 使用 rem 单位（一致） */
.parent {
  font-size: 1.2rem;
}
.parent .child {
  font-size: 1.2rem; /* 仍然是根字体大小的 1.2 倍 */
}

2. 媒体查询行为

一个重要说明：媒体查询中的 rem 行为与常规 CSS 中的不同。在媒体查询中，rem 始终基于浏览器的默认字体大小，而不是您的自定义根字体大小：

html {
  font-size: 62.5%; /* 为常规 CSS 设置 1rem = 10px */
}

@media (min-width: 64rem) { /* 仍然计算为 1024px (64 × 16px) */
  /* 这里的样式 */
}

3. 浏览器支持考虑

虽然 rem 单位在现代浏览器中有很好的支持，但您可能需要为非常旧的浏览器提供后备方案：

.element {
  font-size: 16px;      /* 古老浏览器的后备方案 */
  font-size: 1rem;      /* 现代浏览器将使用这个 */
}

结论

在大多数现代 Web 开发场景中，rem vs px 的争论有一个明确的赢家：rem 单位在可访问性、可扩展性和设计一致性方面提供了卓越的优势。虽然像素在精细细节和像素完美元素方面仍有其作用，但 rem 应该是您在排版、布局和组件尺寸方面的默认选择。

通过采用 rem 优先的方法，在适当的地方战略性地使用像素，您将创建更可访问、用户友好的设计，能够优雅地适应不同的设备和用户偏好。

常见问题