AI 摘要：本文从传统排版学出发，探讨了 “measure（行长）” 概念如何指导现代网页设计。作者建议以内容可读性为核心，用自定义 CSS 属性结合 ch 单位控制文本宽度，将 measure 延伸到多栏布局、网格系统 (Grid)、以及容器查询 (Container Query) 的设计逻辑中。通过以内容为依据而非设备尺寸来设定断点，设计者可以创造出更自然、更连贯、更具可读性的排版系统。

1. 传统排版中的 measure 概念
• “Measure” 起源于金属活字时代，指每行文本能容纳的宽度，是版面设计的核心要素。
• 好的 measure 提高阅读舒适度，差的 measure 会让读者疲劳。
• 从排版角度来看，measure 应成为布局决策的依据，而非被动的结果。

2. 使用 CSS 自定义属性定义 measure
• 使用 --measure 自定义属性并以 ch 单位（字符宽度）定义行长。
• 推荐 60–70 字符每行为理想可读长度。
• 不同字体的 x-height 与字宽会影响实际视觉行长，需通过视觉调整。

3. 保持文字可读性
• 通过 max-inline-size: var(--measure) 控制正文宽度取代 max-width。
• 运用 CSS 逻辑属性 (Logical Properties) 进行方向无关的布局。
• 有效防止“大屏长行综合症”，保持阅读舒适。

4. 设计多栏文本 (Multi-column Layout)
• 使用 column-width: var(--measure) 让浏览器自动计算可读列数。
• 单栏与多栏布局可自适应，不需媒体查询。
• measure 让版面转换更加平滑自然。

5. 用 measure 引导网格布局 (Grid System)
• 在网格定义中，将主文本区的列锁定在 measure 宽度，如 grid-template-columns: minmax(0, var(--measure)) 1fr;。
• 第一列保持理想阅读宽度，第二列灵活适配剩余空间。
• 强化内容与版面之间的连结感。

6. 以 measure 为条件的容器查询 (Container Queries)
• 打破以设备宽度设断点的思维，用内容本身触发布局变化。
• 当容器宽度小于 measure 时，布局可自动折叠至单栏。
• 创建 “内容驱动 (Content-driven)” 的响应设计，而非 “设备驱动 (Device-driven)” 布局。

7. 构建 measure 系统
• 定义多个 measure 变量（如 --measure-s, --measure-l）应对不同文本类型。
• 小 measure 用于说明文字，标准 measure 用于正文，大 measure 用于标题与引导。
• 统一的行长节奏让页面更具整体性与阅读流畅感。

8. 从 measure 出发重新理解设计
• 以 measure 为核心的设计能让排版从“试错”转变为“对话”。
• 内容与布局相互协调，带来更有意识和一致性的视觉节奏。

CSS-Tricks

Getting Creative With “The Measure” | CSS-Tricks

A good measure makes reading text comfortable, while a bad one makes it more difficult. So, rather than allowing layout to dictate the measure, doesn’t it make more sense for the measure to inform layout decisions?

AI 摘要：文章以开发者视角概览 CSS 长度单位，强调 px 在高密度屏幕上已是“虚拟像素”并非绝对单位；屏幕端应优先 rem 以尊重用户字号设置提升可访问性，应用端用视口单位（viewport）适配全屏，打印场景用物理单位；并细分 vh/vw/vi/vb 及 sv*/lv*/dv* 的差别与适用时机，同时给出 em、% 的陷阱与 ch/ex/cap 等小众单位的用途。

1. 基础与绝对单位
• px 已虚拟化：在高像素密度（retina）设备上代表逻辑像素而非物理像素，因此不再“绝对”。
• 打印用物理单位：cm/mm/q/in/pc/pt 设计为打印介质；不同打印机 DPI 差异巨大，屏幕端不宜使用。
• 打印建议：为确保一致输出，优先使用打印友好单位或相对单位以适配不同分辨率。

2. 相对单位
• %（百分比）：相对包含块（containing block）；当元素 absolute 定位时，包含块判定更复杂，易出错。
• em：相对父元素 font-size，组件嵌套会累积放大/缩小，需谨慎。
• rem：相对根元素 html 的 font-size，组件在不同容器中保持一致尺寸；浏览器默认 16px，可用 html{font-size:62.5%} 将 1rem ≈ 10px（便于心算，非必须）。
• 可访问性（accessibility）：以 rem 构建能尊重用户自定义字号；纯 px 布局可能忽略用户设置并导致可读性问题。

3. 视口单位（viewport）
• 基本单位：vh/vw（视口高/宽）、vmin/vmax（较小/较大维度），vi/vb 随书写方向（writing-mode）切换，横排时 vi≈vw、vb≈vh，竖排语言会反转。
• 尺寸变体：sv*（浏览器控件可见时的“小”视口）、lv*（控件隐藏时的“大”视口）、dv*（当前动态视口，随控件显隐变化）。未指明前缀的 v* 等同于 lv*。
• 实战提示：全屏布局用 dvh 更贴合当前高度；为避免移动端地址栏显隐导致跳动，可按需组合 svh/lvh/dvh。

4. “奇特”单位与适用场景
• ch（“0”的宽度）、ex（“x”的高度）、cap（大写字母高度，适合图标对齐文本）、ic（CJK“水”字宽度）、lh（父元素行高）、rlh（根元素行高）。
• 适配文字排版和细粒度对齐；因支持度差异，需评估兼容与降级策略。

5. 实践要点与推荐方案
• 打印：使用 mm 等物理单位获得精确尺寸，或配合相对单位确保跨设备一致性。
• 网页：以 rem 为主，选用 1rem=10px 的设定仅为心算便利；避免全用 px 影响可访问性。
• Web 应用：用 dvh/dvw 填充视口，结合 vi/vb 适配不同 writing-mode。
• 选型原则：优先考虑用户设置与设备独立性、布局稳定性与可维护性，再选最贴合场景的单位。

6. 常见陷阱
• 绝对定位元素用百分比时误判包含块，导致尺寸/位置异常。
• 盲目使用 px 使布局对用户字号调整不敏感，影响可读性与无障碍。
• 移动端 100vh 在地址栏显隐时引发布局跳动，应改用 dvh 或配合 svh/lvh。

Scott Logic

Making Sense of CSS Length Units

For junior developers just starting with CSS, the vast array of available length units can feel overwhelming. This post offers a clear breakdown of the main categories - absolute units; relative units, which adapt better to different screen sizes and accessibility…