sizing-units

尺寸单位

单位回答的问题

单位不是一种格式偏好，而是对用户放大文本时某个值会如何变化的声明。

• rem — 该值属于文本，必须随文本一起增大。
• px — 该值属于屏幕，必须保持不变。
• %、fr、ch、clamp()、min() — 该值属于可用空间。

选择单位时，应回答这个问题，而不是挑选一种团队惯用风格并到处套用。全用 rem 和全用 px 这两种绝对化做法都会产生缺陷，而且产生的缺陷各不相同。

缩放不等于字体大小设置

到处使用 px 的常见理由是，浏览器已经提供整页缩放，因此可以忽略根字体大小。但它们是服务于不同用户的独立控件。

• 整页缩放会放大所有内容，包括布局。它能让文本变大，但代价是出现水平滚动，并且每屏能显示的内容项变少。
• 浏览器的默认字体大小会放大文本，同时保持布局不变。视力较弱的用户会设置一次，然后多年不再更改。他们不会因为你的产品忽略了这一设置而改用缩放。

将每个尺寸都硬编码为 px 的产品照顾到了第一类用户，却悄然拒绝了第二类用户。WCAG 2.2 SC 1.4.4（调整文本大小）要求文本放大到 200% 时，内容和功能不得丢失；SC 1.4.10（重排）要求页面能够以单列布局适应这种情况。参见 [[wcag-accessibility]]。

何时使用 rem

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

文本周围的内边距。 按钮的内边距若使用 px，大号文本就会紧贴边缘。使用 rem，留白就能随它所围绕的文字一起缩放。

控件高度。 一个容纳 24px 文本的 40px 控件存在问题。将高度令牌写成 rem，这样在任何文本大小下，它都能保持控件应有的形状。参见 [[component-family-consistency]]。

文本度量。 文本栏的 max-width：使用 65ch 或 rem 值，绝不要用 px。

承载文本的区块之间的间距。 表单或文章中的堆叠间距属于阅读节奏的一部分。

何时使用 px

细线和边框。 按设计，1px 就是一个设备像素。使用 rem 时，在较大的根字体大小下它会变成 1.25px，渲染成模糊的色块。

阴影偏移和模糊半径。 景深是屏幕空间效果。参见 [[elevation-and-depth]]。

控件中的小图标，仅适用于图标是固定字形而非文本的情况。

亚像素修正 — 例如让两条边框重叠而非叠加变粗的 -1px。

何时使用相对单位

布局宽度和间距。认为“锁定为 px 就能保持稳定”的直觉在这里会出错：锁定为 px 的容器并不稳定，而是脆弱的。容器中的文本仍会变大，而固定大小的盒子恰恰会导致放大后的文本被裁切。

/* 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。 固定高度无法增大；最小高度能在静止状态下保持形状，并在必要时让出空间。

媒体查询

在媒体查询中使用 em。媒体查询中的 rem 和 em 都以浏览器的默认字体大小为基准进行解析，并忽略你设置的任何 html { font-size } — 因此 em 是更准确的写法，而且二者都会尊重用户偏好，而 px 断点不会。默认字体大小较大的用户会获得与其实际文本大小相匹配的布局，而不是与设备宽度所暗示的布局。

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

不要重置根字体大小

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

62.5% 技巧旨在简化 rem 的计算 — 用 1.6rem 表示 16px。它让心算更容易，却默认覆盖了用户明确表达的偏好。保持根字体大小为浏览器默认值，让工具来完成换算。

被测量的容器不得依赖其所调整大小的元素

当脚本根据某个元素的容器来调整该元素的大小时，在每个断点下，容器的尺寸都必须明确，且不依赖该元素。如果容器紧贴子元素收缩，就会测得子元素自身折叠后的尺寸，而在尺寸链失去明确尺寸的断点下，该元素会悄无声息地保持折叠状态。让尺寸链一直延伸到被测量的盒子都有明确尺寸，并观察盒子本身，而不是监听窗口事件。

审查清单

• 每个字号、行高以及与文本相邻的内边距是否都使用 rem？
• 边框、细线和阴影偏移是否使用 px？
• 是否有任何包含文本的元素使用了 height 而非 min-height？
• 容器宽度是否使用相对值（%、fr、clamp()、max-width），而非固定 px？
• 媒体查询断点是否使用 em？
• 是否保留了浏览器默认的 html { font-size }？
• 当浏览器字号设置为 200% 时，每个控件是否仍能完整容纳其标签，没有裁切，也不会导致页面出现水平滚动？
• 每个由脚本测量的容器，是否都由布局决定尺寸，而非由它所调整大小的子元素决定？