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?