CSS 单位

在 CSS 中，单位用于指定各种属性的值，如 width, height, margin, padding, font-size 等。正确地选择和使用单位对于创建可伸缩、可维护和响应式的布局至关重要。

CSS 单位可以分为两大类：绝对单位和相对单位。

绝对单位 (Absolute Units)

绝对单位是固定的，它们不依赖于任何其他元素的大小。它们在任何设备上都表示一个物理长度。

px (像素): 这是最常用、最基础的单位。1 像素对应于显示设备上的一个物理点。对于屏幕显示来说，px 是一个非常精确的单位。
cm, mm, in: 厘米、毫米、英寸。这些单位更常用于打印样式表 (@media print)。
pt (点): 1/72 英寸。
pc (派卡): 12 点。

css

div {
  width: 200px;
  border: 1px solid black;
}

相对单位 (Relative Units)

相对单位的值是相对于其他长度值计算的。使用相对单位可以使你的设计更具灵活性和可伸缩性。

字体相对单位

em: 相对于当前元素的 font-size。如果用在 font-size 属性上，它相对于父元素的 font-size。例如，如果一个元素的 font-size 是 16px，那么 2em 就等于 32px。em 单位会产生复合效应，在深层嵌套中可能难以管理。
rem (root em): 相对于根元素 (<html>) 的 font-size。这是一个非常强大的单位，因为它不受父元素字体大小的影响，避免了 em 的复合问题。现代 Web 设计中，rem 是设置字体大小、间距和组件尺寸的首选单位。

css

html {
  font-size: 16px;
}

.parent {
  font-size: 1.25em; /* 16px * 1.25 = 20px */
}

.child {
  font-size: 1.5rem; /* 16px * 1.5 = 24px, 不受父元素影响 */
  padding: 1rem; /* 16px */
}

视口相对单位

视口 (Viewport) 是浏览器窗口中可见的区域。

vw (viewport width): 相对于视口宽度的 1%。10vw 等于视口宽度的 10%。
vh (viewport height): 相对于视口高度的 1%。100vh 等于整个视口的高度。
vmin: vw 和 vh 中较小的值。
vmax: vw 和 vh 中较大的值。

视口单位在创建全屏英雄区域或需要根据屏幕尺寸进行缩放的字体和布局时非常有用。

css

.fullscreen-section {
  height: 100vh;
}

h1 {
  font-size: 5vw;
}

百分比 (`%`)

% 单位总是相对于父元素的某个属性值。例如，width: 50% 意味着元素的宽度是其父元素宽度的 50%。

css

.parent {
  width: 400px;
}

.child {
  width: 50%; /* 400px * 0.5 = 200px */
}

单位选择建议

字体大小: 优先使用 rem，以获得可访问性和可伸缩性。
边距和填充: 使用 rem 可以使间距与字体大小保持和谐的比例。在某些情况下，px 用于微调，% 用于流式布局。
边框: 通常使用 px，因为边框通常需要是精确的细线。
布局宽度/高度: 使用 % 创建流式布局，使用 vw/vh 创建与视口相关的布局。
媒体查询: 使用 em 或 rem 设置断点，可以使你的响应式设计更好地适应用户调整的字体大小。

CSS 单位 ​

绝对单位 (Absolute Units) ​

相对单位 (Relative Units) ​

字体相对单位 ​

视口相对单位 ​

百分比 (%) ​