sizing-units

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Sizing Units

尺寸单位

The Question the Unit Answers

单位所回答的问题

A unit is not a formatting preference. It is a declaration of what happens to a value when the user enlarges text.

```
rem
```
— this value belongs to the text and must grow with it.
```
px
```
— this value belongs to the screen and must stay put.
```
%
```
,
```
fr
```
,
```
ch
```
,
```
clamp()
```
,
```
min()
```
— this value belongs to the available space.

Pick the unit by answering that question, not by picking a house style and applying it everywhere. Both absolutist positions — all-rem and all-px — produce defects, and they are different defects.

单位不是格式偏好。它是在声明：当用户放大文字时，某个值会发生什么。

```
rem
```
—— 此值属于文字，必须随文字增长。
```
px
```
—— 此值属于屏幕，必须保持不变。
```
%
```
、
```
fr
```
、
```
ch
```
、
```
clamp()
```
、
```
min()
```
—— 此值属于可用空间。

选择单位时应该回答这个问题，而不是先选定一种团队风格再到处套用。两种绝对化立场——全部使用 rem 和全部使用 px——都会产生缺陷，而且缺陷各不相同。

Zoom Is Not the Font-Size Setting

缩放不是字号设置

The common argument for px everywhere is that browsers already have full-page zoom, so the root font size can be ignored. They are separate controls serving separate people.

Full-page zoom magnifies everything, layout included. It buys larger text at the cost of horizontal scrolling and fewer items per screen.
The browser's default font size enlarges text and leaves the layout alone. This is what a user with low vision sets once, years ago, and never touches again. They will not switch to zoom because your product ignored it.

A product that hard-codes every dimension in px answers the first user and silently refuses the second. WCAG 2.2 SC 1.4.4 (Resize Text) requires text to reach 200% without loss of content or function, and SC 1.4.10 (Reflow) requires the page to survive it in a single column. See [[wcag-accessibility]].

支持到处使用 px 的常见论据是，浏览器已经提供整页缩放，因此可以忽略根字号。两者是服务于不同人群的独立控制项。

整页缩放会放大包括布局在内的所有内容。它能换来更大的文字，代价是横向滚动以及每屏可见项目更少。
浏览器的默认字号会放大文字，但保持布局不变。视力不佳的用户可能多年前设置一次此选项，之后便再也不会调整。如果你的产品无视该设置，他们不会改用缩放。

一个将所有尺寸硬编码为 px 的产品满足了第一类用户的需求，却默默地拒斥第二类用户。WCAG 2.2 SC 1.4.4（Resize Text）要求文字放大到 200% 时，内容和功能不得丢失；SC 1.4.10（Reflow）则要求页面在单列布局中仍能承受这种放大。参见 [[wcag-accessibility]]。

Use rem For

对以下内容使用 rem

Typography. Every font size and line height. See [[modular-scale-typography]].

Padding around text. A button's inner padding in px means large text presses against its edges. In rem the breathing room scales with the words it surrounds.

Control heights. A 40px control holding 24px text is broken. Write the height token in rem and it stays a control-shaped control at every text size. See [[component-family-consistency]].

Measure.

max-width

on a text column:

65ch

or a rem value, never px.

Gaps between text-bearing blocks. Stack spacing in a form or an article is part of the reading rhythm.

排版。 所有字号和行高。参见 [[modular-scale-typography]]。

文字周围的内边距。 如果按钮的内边距使用 px，大号文字就会紧贴其边缘。使用 rem 时，留白空间会随周围文字一起缩放。

控件高度。 一个高度为 40px、容纳 24px 文字的控件必然存在问题。将高度 token 写成 rem，它就能在各种文字尺寸下始终保持为形态正常的控件。参见 [[component-family-consistency]]。

文本行宽。 文本列的

max-width

应使用

65ch

或 rem 值，绝不要使用 px。

包含文字的区块之间的间距。 表单或文章中的堆叠间距是阅读节奏的一部分。

Use px For

对以下内容使用 px

Hairlines and borders.

1px

is one device pixel by intent. In rem it becomes

1.25px

at a larger root size and renders as a blurry smear.

Shadow offsets and blur. Elevation is a screen-space effect. See [[elevation-and-depth]].

Small icons inside controls where the icon is a fixed glyph rather than text.

Sub-pixel corrections — the

-1px

that makes two borders overlap instead of doubling.

细线和边框。 按设计意图，

1px

就是一个设备像素。使用 rem 时，在根字号较大的情况下，它会变成

1.25px

，并渲染成一团模糊的痕迹。

阴影偏移和模糊。 高度感属于屏幕空间效果。参见 [[elevation-and-depth]]。

控件内部的小图标，前提是该图标是固定字形而非文字。

亚像素修正——使用

-1px

让两条边框重叠，而不是使尺寸翻倍。

Use Relative Units For

对以下内容使用相对单位

Layout widths and gaps. This is where the "lock it in px so it stays stable" instinct goes wrong: a px-locked container is not stable, it is brittle. The text inside it still grows, and a fixed box is exactly what makes growing text clip.

css

/* Brittle — the box cannot absorb anything */
.card   { width: 320px; height: 180px; }
.sidebar { width: 280px; }

/* Resilient */
.card    { max-width: 20rem; min-height: 11.25rem; }
.sidebar { width: clamp(16rem, 22%, 22rem); }

min-height
, never
height
, on anything containing text. A fixed height cannot grow; a minimum height holds the shape at rest and yields when it must.

布局宽度和间距。这里正是“用 px 锁死以保持稳定”这一本能出错的地方：用 px 锁定的容器并不稳定，而是很脆弱。其中的文字仍会增长，而固定盒子恰恰会导致增大的文字被裁切。

css

/* Brittle — the box cannot absorb anything */
.card   { width: 320px; height: 180px; }
.sidebar { width: 280px; }

/* Resilient */
.card    { max-width: 20rem; min-height: 11.25rem; }
.sidebar { width: clamp(16rem, 22%, 22rem); }

任何包含文字的元素都应使用
min-height
，绝不要使用
height
。固定高度无法增长；最小高度会在静止时维持形状，并在必要时让步、增长。

Media Queries

媒体查询

Use

em

in media queries. Media-query

rem

and

em

both resolve against the browser's default font size, ignoring any

html { font-size }

you set — so

em

is the honest spelling, and both respect the user's preference where a px breakpoint does not. A user with a large default font size gets the layout their effective text size warrants, not the one their device width claims.

css

@media (min-width: 48em) { /* ~768px at default settings */ }

在媒体查询中使用

em

。媒体查询中的

rem

和

em

都会根据浏览器的默认字号进行解析，而忽略你设置的任何

html { font-size }

，因此

em

才是诚实的写法。与 px 断点不同，两者都能尊重用户偏好。默认字号较大的用户会获得与其有效文字大小相称的布局，而不是由设备宽度所决定的布局。

css

@media (min-width: 48em) { /* ~768px at default settings */ }

Do Not Reset the Root

不要重置根字号

css

html { font-size: 62.5%; } /* Do not do this */

The 62.5% trick exists to make rem arithmetic easy —

1.6rem

for 16px. It buys you mental arithmetic and pays for it by overriding the user's stated preference by default. Keep the root at the browser default and let the tooling do the division.

css

html { font-size: 62.5%; } /* Do not do this */

62.5% 技巧是为了让 rem 运算更容易——用

1.6rem

表示 16px。它省去了心算，却以默认覆盖用户明确表达的偏好的代价来交换。保持根字号为浏览器默认值，让工具完成换算。

Review Checklist

审查清单

Is every font size, line height, and text-adjacent padding in rem?
Are borders, hairlines, and shadow offsets in px?
Does any element containing text use
```
height
```
rather than
```
min-height
```
?
Are container widths relative (
```
%
```
,
```
fr
```
,
```
clamp()
```
,
```
max-width
```
) rather than fixed px?
Are media-query breakpoints in
```
em
```
?
Is
```
html { font-size }
```
left at the browser default?
At a 200% browser font-size setting, does every control still contain its label, with no clipping and no horizontal page scroll?

所有字号、行高和紧邻文字的内边距都使用 rem 了吗？
边框、细线和阴影偏移都使用 px 了吗？
是否有任何包含文字的元素使用
```
height
```
而非
```
min-height
```
？
容器宽度是否使用相对单位（
```
%
```
、
```
fr
```
、
```
clamp()
```
、
```
max-width
```
），而不是固定的 px？
媒体查询断点都使用 em 了吗？
```
html { font-size }
```
是否保持为浏览器默认值？
在浏览器字号设置为 200% 时，每个控件是否仍能容纳其标签，没有裁切，也没有页面横向滚动？