在 CSS (Cascading Style Sheets) 中，单位是用来指定数值大小或尺寸的关键部分。无论是设置字体大小、元素宽度、边距还是动画时长，都需要使用合适的单位。CSS 提供了多种单位类型，它们可以分为两大类：绝对单位 和 相对单位。理解这些单位及其适用场景对于构建响应式、可维护的 Web 界面至关重要。

核心思想：CSS 单位是用来量化样式的尺寸或数值，分为绝对单位（如 px, pt）和相对单位（如 em, rem, %, vw, vh）。合理选择和使用这些单位，是实现响应式设计、确保界面在不同设备和上下文下表现一致的关键。

一、绝对单位 (Absolute Length Units)

绝对单位表示一个固定的物理量，其大小不会受到视口、父元素字体大小或其他环境因素的影响。它们在不同设备上理论上保持相同大小（物理尺寸），但在屏幕上可能会因为屏幕 DPI (Dots Per Inch) 不同而视觉效果有所差异。

1.1 px (Pixels)

  • 定义：一个像素点。这是 Web 开发中最常用的单位。
  • 特性：
    • 在 CSS 中，px 是一个逻辑像素，不一定对应屏幕上的一个物理像素。它会受到设备像素比 (Device Pixel Ratio, DPR) 的影响。例如，在一个 DPR 为 2 的 Retina 屏幕上，1 CSS px 对应 2x2 个物理像素。
    • 虽然是绝对单位，但由于 DPR 的存在，px 在视觉上也会有“相对”的效果，即在高分屏上 1px 看起来会更小（因为它占用的物理像素更多）。
  • 适用场景：
    • 需要精确控制元素大小的场景。
    • 在不需要响应式缩放或固定布局中非常方便。
    • 作为其他相对单位的基准值。

示例：

1
2
3
4
5
6
.box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  font-size: 16px;
}

1.2 in (Inches)

  • 定义：英寸 (1in = 96px)。
  • 适用场景：主要用于印刷媒体的样式，在屏幕显示上很少使用。

1.3 cm (Centimeters)

  • 定义：厘米 (1cm = 96px/2.54 = 37.8px)。
  • 适用场景：同 in，主要用于印刷媒体。

1.4 mm (Millimeters)

  • 定义：毫米 (1mm = 1/10th of cm)。
  • 适用场景：同 in，主要用于印刷媒体。

1.5 pt (Points)

  • 定义：点 (1pt = 1/72nd of in = 1.333px)。传统上用于印刷业，1 英寸等于 72 点。
  • 适用场景：主要用于印刷媒体，在 Web 开发中很少直接使用。

1.6 pc (Picas)

  • 定义：派卡 (1pc = 12pt)。
  • 适用场景：同 pt，主要用于印刷媒体。

二、相对单位 (Relative Length Units)

相对单位的大小会根据其他因素（如父元素的大小、根元素字体大小、视口大小等）进行动态调整。它们是实现响应式设计和可伸缩界面的关键。

2.1 em

  • 定义：相对于当前元素的字体大小 (font-size)。如果当前元素没有设置字体大小，则继承父元素的字体大小。
  • 特性：具有级联性。一个元素的 em 值会受到其父元素字体大小的影响，这意味着嵌套层级越深，计算可能越复杂，容易产生意想不到的结果（“复合效应”）。
  • 适用场景：
    • 当需要元素的大小（如内边距、外边距、行高）与其自身字体大小保持比例时。
    • 例如，一个按钮的内边距设置为 0.5em，无论按钮字体多大，内边距都会是字体大小的一半。
  • 计算示例：
    • html { font-size: 16px; }
    • body { font-size: 1em; /* 等同于 16px */ }
    • div { font-size: 1.2em; /* 16px * 1.2 = 19.2px */ padding: 1em; /* 19.2px * 1 = 19.2px */ }
    • p { font-size: 0.8em; /* 19.2px * 0.8 = 15.36px */ }

2.2 rem (Root em)

  • 定义：相对于根元素 (HTML 元素) 的字体大小 (font-size)。
  • 特性：消除了级联性。无论元素嵌套多深，rem 值始终只参照 HTML 元素的 font-size，这使得计算和维护更加简单和可预测。
  • 适用场景：
    • 实现全局统一的字体大小缩放和响应式布局。
    • 通常将 html 的 font-size 设置为一个基准值（如 16px 或通过百分比设置），然后所有其他元素的大小都使用 rem。
    • 结合媒体查询，可以很方便地调整不同屏幕尺寸下的整体布局比例。
  • 计算示例：
    • html { font-size: 16px; }
    • div { font-size: 1.2rem; /* 16px * 1.2 = 19.2px */ padding: 1rem; /* 16px * 1 = 16px */ }
    • p { font-size: 0.8rem; /* 16px * 0.8 = 12.8px */ }

2.3 % (Percentage)

  • 定义：
    • 宽度/高度：相对于父元素的宽度/高度。
    • 字体大小：相对于父元素的字体大小。
    • 定位：相对于包含块的宽度/高度。
    • 行高：相对于元素自身的字体大小。
    • 边距/内边距：垂直方向的 margin/padding 百分比是相对于父元素的宽度，而不是高度。水平方向的 margin/padding 百分比也是相对于父元素的宽度。
  • 特性：高度依赖于上下文，行为多样。
  • 适用场景：
    • 创建流体布局，使元素根据父容器的大小进行缩放。
    • 用于控制图片或视频的响应式宽度。
  • 注意：margin-top: 10% 和 padding-top: 10% 都是基于父元素的宽度计算的，这一点常常令人困惑。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  width: 80%; /* 相对于父元素的宽度 */
  margin-left: auto;
  margin-right: auto;
}
.image {
  width: 100%; /* 相对于父元素的宽度 */
  height: auto;
}
.text {
  font-size: 120%; /* 相对于父元素的字体大小 */
  padding-bottom: 50%; /* 相对于父元素的宽度 */
}

2.4 vw (Viewport Width)

  • 定义：相对于视口 (viewport) 的宽度。1vw 等于视口宽度的 1%。
  • 特性：完全基于视口宽度，与父元素或根元素字体大小无关。
  • 适用场景：
    • 全局响应式布局，需要元素大小随屏幕宽度等比例缩放的场景。
    • 制作全屏组件或横向滚动效果。
    • 配合 vh 实现宽高比例固定（如 width: 50vw; height: 50vw;）。
  • 注意：100vw 可能包含滚动条的宽度，导致出现横向滚动条。

2.5 vh (Viewport Height)

  • 定义：相对于视口 (viewport) 的高度。1vh 等于视口高度的 1%。
  • 特性：完全基于视口高度，与父元素或根元素字体大小无关。
  • 适用场景：
    • 制作全屏或半屏的 Hero Section。
    • 需要元素大小随屏幕高度等比例缩放的场景。
  • 注意：在移动端，浏览器地址栏的出现和隐藏会影响 100vh 的实际高度，导致布局跳动（通常指 iOS Safari 的问题，现代浏览器有 dvh, svh, lvh 来解决，但兼容性有限）。

2.6 vmin / vmax

  • 定义：
    • vmin：取 vw 和 vh 中较小的一个值。
    • vmax：取 vw 和 vh 中较大的一个值。
  • 特性：根据视口最窄或最宽的边进行缩放。
  • 适用场景：
    • 确保元素始终在视口内可见 (例如，font-size: 5vmin 可以确保文字在横屏或竖屏下都能合理显示)。
    • 制作始终充满整个视口而不溢出的组件。

示例：vw, vh, vmin, vmax

1
2
3
4
5
6
7
8
9
10
.full-screen-section {
  width: 100vw;
  height: 100vh;
  font-size: 5vw; /* 字体大小随视口宽度变化 */
}
.square {
  width: 50vmin; /* 在横屏或竖屏下，都取视口较短边的一半 */
  height: 50vmin;
  background-color: lightblue;
}

三、其他常用单位

3.1 时间单位

  • s (Seconds)：秒。
  • ms (Milliseconds)：毫秒 (1s = 1000ms)。
  • 适用场景：transition, animation 属性，设置动画或过渡的持续时间。

示例：

1
2
3
4
5
6
.button {
  transition: background-color 0.3s ease-in-out;
}
.spinner {
  animation: spin 1s infinite linear;
}

3.2 角度单位

  • deg (Degrees)：度 (一个圆是 360deg)。
  • grad (Gradians)：梯度 (一个圆是 400grad)。
  • rad (Radians)：弧度 (一个圆是 2π rad)。
  • turn (Turns)：圈 (一个圆是 1turn)。
  • 适用场景：transform 属性 (旋转 rotate())，linear-gradient() 等。

示例：

1
2
3
4
5
6
.rotated-box {
  transform: rotate(45deg);
}
.gradient {
  background-image: linear-gradient(90deg, red, blue);
}

3.3 分辨率单位

  • dpi (Dots Per Inch)：每英寸点数。
  • dpcm (Dots Per Centimeter)：每厘米点数。
  • dppx (Dots Per Pixel)：每像素点数。
  • 适用场景：主要用于媒体查询 (@media)，根据设备的像素密度提供不同的样式。

示例：

1
2
3
@media print and (min-resolution: 300dpi) {
  /* 打印样式，当打印机分辨率至少为 300dpi 时应用 */
}

四、如何选择合适的单位？

选择正确的 CSS 单位对于构建响应式和可维护的 Web 应用程序至关重要。

  1. 全局字体大小和响应式基准：

    • rem 是最佳选择。将 html 的 font-size 设置为 16px 或 62.5%（使其成为 10px，方便计算），然后所有字体大小、内边距、外边距都使用 rem。
    • 通过调整 html 的 font-size 结合媒体查询，可以实现网站的整体缩放。

  2. 需要与元素自身字体大小关联的内边距/外边距/行高：

    • em 可能适用。例如，按钮的 padding 和 line-height 与按钮的 font-size 保持比例。

  3. 固定大小的元素或边框：

    • px 是最直接、最精确的选择。

  4. 根据视口大小动态调整的元素：

    • vw 和 vh 是理想选择。用于全屏元素、或者需要随视口宽度/高度等比例缩放的组件。
    • vmin 和 vmax 用于确保元素在不同长宽比的视口下都表现良好。

  5. 基于父容器的流式布局：

    • % 适用于宽度、高度、定位等，但要注意 margin/padding 百分比是基于父容器宽度计算的。

  6. 动画和过渡时间：

    • s 和 ms 是唯一选择。

五、总结

CSS 单位是网页设计中不可或缺的工具。绝对单位 px 提供了精确的控制，但可能在不同 DPI 的设备上视觉效果不一致。相对单位 em、rem、%、vw、vh、vmin、vmax 提供了强大的响应式能力，使网页能够适应各种屏幕尺寸和设备环境。通过明智地选择和组合这些单位，开发者可以构建出灵活、美观且用户体验良好的 Web 界面。在现代响应式设计中，rem 和视口单位 (vw/vh) 尤其受到青睐，它们能有效应对多设备环境的挑战。