排版比例生成器

什么是排版比例生成器？

如何使用排版比例生成器

1. 1

   选择比例：点击『比例类型』下拉框，从 Minor Second 到黄金比例共7种预设排版比例中，选择符合你设计需求的比例类型。

2. 2

   设置基准：在『基准字号』输入框填写网页正文字号基准值，一般是16像素，然后在『生成级数』输入框填写需要生成的字号总级数。

3. 3

   预览效果：生成结果后滚动到下方预览区域，可以查看各级字号在实际段落中的显示效果，直观对比不同层级的排版表现。

4. 4

   复制输出：点击右侧代码块上方的『复制代码』按钮，就能一键复制生成好的CSS字号变量代码，直接粘贴到你的项目样式文件中。

什么场景会用到？

计算示例

注意事项

• 工具默认采用音乐音程的通用比例定义，不同设计体系对音程比例的微调可能有差异，生成结果仅供参考，你可以手动调整数值适配项目。
• 如果需要适配移动端最小字号，请不要生成比12px更小的字号，避免浏览器强制缩放影响排版一致性。
• CSS变量命名提供了驼峰、小写横线两种主流格式，你可以根据项目的CSS规范直接选择对应格式。
• 如果使用黄金比例生成，工具默认保留两位小数，CSS渲染时浏览器会自动处理精度，无需手动四舍五入。

常见问题

参考资料

• Tim Brown 创立的 Modular Scale 设计方法论
• W3C CSS Custom Properties 规范

本工具采用Modular Scale通用比例定义，所有比例值经过工具编辑组逐一校验，可直接复制生成的CSS变量到项目中使用，由工具集编辑组维护更新。