| 层级 | 比例 | 大屏字号 | 小屏字号 | clamp() |
|---|
正文段落 - The quick brown fox jumps over the lazy dog. 排版比例让标题和正文形成和谐的视觉层级。Modular scale ensures consistent visual hierarchy between headings and body text.
1. 选择或自定义比例值（推荐纯四度 1.333 或黄金比例 1.618）
2. 设置基准字号（通常 16px 为正文标准）
3. 可选调整最小/最大视口值用于 clamp() 生成
4. 查看生成的字体层级和实时预览
5. 一键复制 CSS 代码应用到项目中
排版比例是一种基于固定比值逐级递增的字号系统。例如使用纯四度 1.333 比例，如果正文 16px，则下一级标题为 16×1.333≈21px，再下一级为 21×1.333≈28px，以此类推。这样生成的字体大小形成和谐的视觉层级，比随意取整更美观。
clamp(MIN, PREFERRED, MAX) 是 CSS 的流体排版函数，让字体随视口变化平滑缩放。它结合了小屏最小值、大屏最大值和中间值，避免了在固定断点处字体大小突变。生成的 clamp() 值可直接用于生产环境。
纯四度(1.333)和纯五度(1.500)是最常用的网页排版比例，层级区分明显。黄金比例(1.618)适合强调视觉对比的设计。小比例(1.200-1.250)适合紧凑型界面如仪表盘。建议从 1.333 开始尝试。