比较所有 CSS 单位，包括 px、em、rem、vw、vh、fr 等。包含每个单位的示例、浏览器支持情况和使用时机。
| 单位 | 比较所有 CSS 单位，包括 px、em、rem、vw、vh、fr 等。包含每个单位的示例、浏览器支持情况和使用时机。 | |
|---|---|---|
pxAbsolute | Pixels — 1/96th of 1 inch on screen | |
ptAbsolute | Points — 1/72nd of 1 inch (print) | |
pcAbsolute | Picas — 12 points = 1 pica | |
cmAbsolute | Centimeters | |
mmAbsolute | Millimeters | |
inAbsolute | Inches (1in = 96px) | |
QAbsolute | Quarter-millimeters (1Q = 0.25mm) |
| 单位 | 比较所有 CSS 单位，包括 px、em、rem、vw、vh、fr 等。包含每个单位的示例、浏览器支持情况和使用时机。 | |
|---|---|---|
emRelative (font) | Relative to parent element's font-size | |
remRelative (font) | Relative to root (:root) font-size | |
chRelative (font) | Width of the '0' character in current font | |
exRelative (font) | Height of lowercase 'x' in current font | |
capRelative (font) | Cap height of current font | |
icRelative (font) | Advance measure of '水' (CJK ideograph) | |
lhRelative (font) | Line height of the element | |
%Relative (parent) | Percentage of parent element's value |
| 单位 | 比较所有 CSS 单位，包括 px、em、rem、vw、vh、fr 等。包含每个单位的示例、浏览器支持情况和使用时机。 | |
|---|---|---|
vwViewport | 1% of viewport width | |
vhViewport | 1% of viewport height | |
vminViewport | 1% of the smaller viewport dimension | |
vmaxViewport | 1% of the larger viewport dimension | |
svhViewport (dynamic) | Small viewport height (excludes mobile browser chrome) | |
dvhViewport (dynamic) | Dynamic viewport height (updates with browser chrome) | |
lvhViewport (dynamic) | Large viewport height (browser chrome hidden) | |
svw / dvw / lvwViewport (dynamic) | Small/Dynamic/Large viewport width variants |
| 单位 | 比较所有 CSS 单位，包括 px、em、rem、vw、vh、fr 等。包含每个单位的示例、浏览器支持情况和使用时机。 | |
|---|---|---|
cqwContainer | 1% of query container's inline size (width) | |
cqhContainer | 1% of query container's block size (height) | |
cqiContainer | 1% of container's inline size | |
cqbContainer | 1% of container's block size | |
cqminContainer | 1% of smaller container dimension | |
cqmaxContainer | 1% of larger container dimension |
| 单位 | 比较所有 CSS 单位，包括 px、em、rem、vw、vh、fr 等。包含每个单位的示例、浏览器支持情况和使用时机。 | |
|---|---|---|
frGrid | Fraction of available grid track space | |
min-contentGrid keyword | Smallest content fits without overflow | |
max-contentGrid keyword | Content's ideal unconstrained width | |
fit-content(N)Grid function | Clamps max-content to N maximum | |
minmax(N, M)Grid function | Track size between minimum N and maximum M |
随 :root 字体大小缩放，遵循用户浏览器设置，跨组件一致
避免使用 px — 不尊重用户字体偏好
rem 用于全局一致间距；em 用于相对于组件字体大小的间距
避免对缩放组件使用 px
% 用于流体容器；ch（45–75ch）用于最佳散文行长
避免对主要内容宽度使用固定 px
dvh 避免移动浏览器 chrome 重叠；vh 仅适用于桌面
避免在移动端单独使用 100vh — URL 栏会裁剪内容
按比例分配剩余空间；在网格中比 % 更简洁
避免随意将 fr 与固定 px 列组合
像素精确渲染；不需要随文本缩放
此处无需相对单位
字体大小使用 rem。rem 相对于根元素字体大小（通常为 16px），通过更改根字体大小可以轻松缩放整个 UI。这也尊重用户浏览器字体大小首选项，提高可访问性。仅对边框、阴影和不应缩放的元素使用 px。
em 相对于父元素的字体大小，在嵌套元素中可能会累积。rem 相对于根（'<'html>）元素的字体大小，更具可预测性。对于字体大小，通常首选 rem。em 对于应随组件自身字体大小缩放的内边距和外边距很有用。
对于需要相对于浏览器视口调整大小的元素（如全屏 Hero 部分、模态框），使用 vw/vh。对于需要相对于父容器调整大小的元素，使用百分比。在地址栏影响高度的移动设备上，dvh（动态视口高度）优于 vh。
容器查询单位（cqw、cqh、cqi、cqb）相对于容器元素的大小而不是视口。它们需要容器上下文（container-type: inline-size）。非常适合真正响应式的组件，无论视口大小如何，都需要适应容器大小。