CSS黄金比例计算器
在线CSS黄金比例计算器，支持黄金分割尺寸计算、字体层级与间距系统生成、可视化预览，适用于网页排版设计与前端样式开发。
已就绪，修改尺寸后会实时计算。
黄金比例计算
计算结果
较大段
247px
61.8%
较小段
153px
38.2%
黄金比例（φ）
φ ≈ 1.6180339887
公式：较大段 / 较小段 = φ
黄金比例常用于艺术、建筑与界面设计，用于建立更自然的视觉秩序。
可视化预览
247px
153px
黄金螺旋示意
黄金比例字体系统
基于 φ 自动生成层级清晰的字体尺寸
黄金比例间距系统
基于 φ 生成统一的间距参考
工具说明
CSS黄金比例计算器用于快速得到黄金分割尺寸，并联动生成字体层级与间距系统，适合在设计规范制定与前端开发阶段统一比例标准。
核心功能
- 支持输入任意基础尺寸，实时输出 61.8% 与 38.2% 两段结果。
- 支持水平与垂直两种分割方向，便于不同布局形态下的比例验证。
- 支持基于 φ 自动生成字体层级，帮助建立清晰的排版节奏。
- 支持生成间距比例序列，可直接用于 spacing token 或设计规范。
使用步骤
- 输入基础尺寸后点击计算，或直接修改输入框实时更新结果。
- 切换分割方向，观察比例线在横向与纵向布局中的位置变化。
- 查看字体系统与间距系统，选择适合项目的比例档位。
- 将结果用于页面排版、组件设计或样式变量定义。
应用场景
- 前端项目建立字体和间距的统一比例规范
- 设计评审时快速验证版式分割是否协调
- 组件库开发中推导标题、正文和留白的尺寸体系
- 教学演示黄金分割在网页布局中的实际用法
常见问题
- 为何结果会有取整：工具按像素场景处理并四舍五入，便于直接落地样式代码。
- 字体系统和间距系统可否改基准值：当前提供常用基准，便于快速对比与选型。
- 垂直分割为何更高：为了更直观展示分割位置，纵向预览会自动使用更高容器。
- 输入数据会上传吗：不会，全部计算在浏览器本地完成。
隐私说明
本工具不会上传输入尺寸或计算结果，黄金比例计算、可视化和比例系统生成均在本地浏览器执行。