流体排版系统 是做什么的？
目的
流体排版系统技能允许创建一种能够根据用户视口大小平滑适应的排版比例。与在特定断点处跳跃到固定大小不同，排版使用 CSS 的 clamp() 函数在定义的最小和最大值之间线性缩放。这改善了视觉和谐、可读性，并减少了管理众多媒体查询的维护开销。
使用场景
- 从头构建一个响应式设计系统。
- 现代化现有网站的排版，以获得更好的跨设备一致性。
- 创建文本需要在所有屏幕尺寸下完美填充可用空间的布局。
- 通过用一组流式变量替换多个
@media规则来简化 CSS。
何时不应使用
- 旧版浏览器支持： 如果项目需要支持不能理解
clamp()的浏览器（例如 Internet Explorer）。 - 固定宽度设计： 当布局是严格固定的，并且不打算响应式时。
- 极端精确： 如果特定品牌指南要求在每个可能的分辨率上使用确切的像素大小，且这些大小与线性比例不匹配。
输入
要生成流体排版系统，您需要：
- 视口范围：
min-width：缩放开始的屏幕宽度（例如 320px）。max-width：缩放停止的屏幕宽度（例如 1200px）。
- 基础字体大小：
min-size：在min-width时的正文字体大小（例如 16px）。max-size：在max-width时的正文字体大小（例如 20px）。
- 缩放比例：
- 一个用于确定标题大小的乘数（例如 1.250 代表“大三度”，1.333 代表“纯四度”）。
输出
- CSS 自定义属性： 定义流体比例的一组 CSS 变量。
- 排版工具类： （可选）用于轻松应用该比例的 CSS 类。
- 层次结构文档： 从正文到 H1 的清晰尺寸映射。
工作流程
1. 定义比例参数
确定最小和最大视口以及基础大小。 示例： 320px 到 1280px，基础大小为 16px 到 18px。
2. 选择排版比例
选择符合品牌语调的比例。
- 1.067（小二度）： 细微差异，适合密集数据。
- 1.200（小三度）： 标准，平衡。
- 1.414（增四度）： 高对比度，醒目标题。
3. 计算层次级别
将基础大小乘以比例得到每个级别（H6 到 H1）。
公式： Size_level = Base * (Ratio ^ Level)
4. 生成流体公式
将计算出的最小/最大像素值转换为 clamp() 函数。
clamp(min, preferred, max)
首选值计算：
slope = (max_size - min_size) / (max_viewport - min_viewport)
y_intercept = min_size - slope * min_viewport
preferred = (y_intercept) + (slope * 100vw)
5. 实现
将生成的 CSS 变量应用于设计。
决策规则
- 可访问性优先： 正文的
min-size很少应低于1rem（16px）。 - 用户偏好： 始终对最终输出使用
rem单位，以便尊重用户浏览器的字体大小设置。切勿使用仅基于vw且没有基于rem的最小/最大夹紧的尺寸调整——纯视口单位会忽略用户的浏览器缩放和字体大小偏好，并可能违反 WCAG 1.4.4（调整文本）。 - 比例强度： 对于移动端为主的网站，使用较小比例以防止标题在小屏幕上变得过大。
约束条件
- 响应性： 排版必须保持在其容器的范围内，不导致溢出。
- 可读性： 行长度理想情况下应保持在 45-75 个字符之间。随着文本缩放，相应调整容器宽度。
- 层次结构： H1 必须在视觉上与 H2 不同且更大，H2 必须比 H3 大，依此类推。
常见失败模式
- 数学计算错误： 导致文本在屏幕变大时反而缩小。
- 单位不匹配： 混合使用
px和rem，破坏浏览器缩放。 - 过度缩放： 标题在 4K 显示器上变得非常大，以至于占据整个视口。
- 可访问性： 忘记测试当用户缩放或增加操作系统/浏览器基础字体大小时流体比例的行为（WCAG 1.4.4 调整文本，WCAG 1.4.10 回流）。
验证标准
- 当调整浏览器窗口大小时，排版平滑缩放。
- 没有可见的“跳跃”或突然的大小变化。
- 所有文本在 320px 宽度下清晰可读。
- 标题相对于正文保持清晰的层次结构。
- 系统为基础使用
rem单位，为流体行为使用clamp()。 - 在浏览器缩放至 400% 时，文本能够回流且不丢失内容或功能（WCAG 1.4.10 回流），并尊重用户的字体大小偏好（WCAG 1.4.4）。