在线排版比例计算 - 模块化比例生成字体层级，实时预览排版效果
| 层级 | 名称 | 大小 (px) | 大小 (rem) | 预览 |
|---|
模块化比例是一种排版设计方法，基于数学比例关系生成字体大小层级。每个层级的大小是前一个层级乘以固定比例值。这种方法确保了字体大小之间的和谐关系，常见比例包括黄金比例(1.618)、完美五度(1.5)等。
选择取决于设计风格：黄金比例(1.618)适合戏剧性对比，完美五度(1.5)适合中等对比，完美四度(1.333)适合微妙对比。移动端建议用较小比例(1.125-1.25)，桌面端可用较大比例(1.333-1.618)。
将生成的CSS变量复制到项目根样式中，然后在组件中引用变量名（如font-size: var(--step-3)）。这样修改比例时只需更改变量值，所有引用处自动更新。
模块化比例基于数学比例关系生成字体大小层级，每个层级是前一个乘以固定比例，确保字体大小和谐关系。
黄金比例1.618适合戏剧性对比，1.5适合中等对比，1.333适合微妙对比。移动端用较小比例，桌面端用较大比例。
复制CSS变量到项目根样式，组件中引用变量名如font-size: var(--step-3)，修改变量值即可全局更新。