用 φ = 1.618 切分任意长度 —— 长短两段、黄金序列、字号阶、布局分栏、黄金矩形 —— 纯浏览器本地
- 本地处理
- 分类 计算度量
- 适合 买东西、做计划、训练或排期前,先算出大概范围。
这个工具能做什么
一个为设计师真正用到 φ 的那一刻做的黄金比例计算器:你手上只有一个数 —— 一个容器宽度、一个基准字号、一张海报的高 —— 需要它的黄金搭档。 输入数值,立刻得到长段(value ÷ 1.618)和短段(value − 长段), 这两段相加正好还原成你原来的长度。在此之上工具向两个方向生成黄金 序列(value × φⁿ 与 value ÷ φⁿ),16px 的基准字号一眼就展开成 9.9 / 16 / 25.9 / 41.9 / 67.8px 的完整字阶。三个应用场景计算器把 φ 落成真实排版数字:字号阶(基准字号向上向下生成黄金阶)、两栏布局 切分(容器宽度切成主栏 + 侧栏)、黄金矩形(宽度推出 φ 高度)。一张 实时 SVG 把黄金矩形连同内部正方形和螺旋辅助线画出来,让你看见这次 切分,而不只是读到数字。每个结果都有一键复制,主要输入同步到可分享 的 URL,精度和模式偏好本地记住。100% 在浏览器里跑 —— 你输入的内容 不离开这个标签页。
工具细节
- 输入
- 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 9 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 计算度量 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
黄金比例计算器 适合怎么用
适合快速估算、对比和规划数字,帮你在做最终决定前先有底。
适合计算任务
- 买东西、做计划、训练或排期前,先算出大概范围。
- 一次只改一个输入,对比不同方案。
- 把模糊假设变成能讨论的数字。
计算检查项
- 认真核对单位、日期、比例和取整方式。
- 健康、金融、税务、法律相关结果只能做规划参考,不能替代专业意见。
- 重要结果要保存输入条件,方便以后复算。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
从 16px 正文字号生成一套 φ 字阶
你想要一套读起来成比例、而不是手挑出来的标题字阶。在字号阶 计算器里输入 16,读出黄金阶:9.9 / 16 / 25.9 / 41.9 / 67.8px。 取整成 10 / 16 / 26 / 42 / 68px,分别映射到辅助文字 / 正文 / h3 / h2 / h1,你就有了一套每一跳都是同一个 φ 倍率的五级字阶。 如果 67.8px 在手机上显得太冲,那正是提示你那里该用更紧的比例 —— 流式字号正好交给 css-clamp-fluid-typography-generator 接手。
把 1200px 内容容器切成主栏 + 侧栏
博客布局需要一个舒服的主栏和一条更窄的侧栏。把 1200 喂进布局 计算器:长段 741.6px,短段 458.4px。取整成 742 / 458(或者 740 / 460 保留整数),设进你的栅格列,这个比例读起来是刻意 安排的,而不是"70/30,因为感觉还行"。响应式断点上,把这个 切分配合 aspect-ratio-calculator 用,保持媒体块比例一致。
给 logo 组合定尺寸和留白
你有一个 240px 宽的字标,需要留白和一个不打架的图标。输入 240:短段 91.6px 是配套图标的自然宽度,长短关系还给你一个边距 (≈ 91px),正好和字标内部的节奏对齐。设计师在这里用 φ,是因为 眼睛会把图标、字标和留白读成一家人,而不是三个互不相干的尺寸。
排一张黄金矩形海报或卡片
在矩形计算器里把卡片宽度设为 360px,它会返回高度 222.5px (宽 ÷ φ)做横向黄金矩形,或 582.5px(宽 × φ)做纵向。实时 SVG 画出内部正方形和螺旋,你可以把视觉焦点放在螺旋的"眼"上 —— 这是 hero 图和印刷封面的经典构图手法。
给设计系统生成一套间距阶
间距 token 经常从 8 / 16 / 24 / 32 起步 —— 线性,有点平。把你的 基准单位(比如 8)丢进序列,改用黄金阶 8 / 13 / 21 / 34 / 55 (这些是斐波那契,φ 的整数面孔)。出来的阶梯和字号、布局一样 地长,于是边距、间隙、字号共享同一套比例语言。再用 color-palette-generator 锁住这些 token 的配色,整个系统就读成 一个整体了。
常见踩坑
把"除以 φ"和"乘以 φ"搞混。要把一段长度切成相加等于原长的两段,长段是 value ÷ φ;要得到更大的同族尺寸,才是乘以 φ。搞反了布局会大 1.618 倍或小 1.618 倍 —— 检查两个输出加起来是不是等于输入(切分场景应该相等)。
生产里用太多小数位。φ 是无理数,741.64px 这种原始输出看着精确,实际渲染到子像素位置浏览器照样取整。选一个精度(布局用整像素,字号用 0.01rem)就在那里取整 —— 追到第 4 位小数是虚假精度。
把 φ 当成铁律而不是起点。φ 切分对 320px 的手机栏可能太极端(123/197 在手机上一头重)。把它当第一版提案,内容或视口需要时就往更紧的比例调 —— 计算器给你数字,不是命令。
隐私说明
每一次计算 —— φ 分段、黄金序列、字号阶、布局切分、矩形尺寸、 SVG 预览 —— 都是浏览器标签页里跑的纯 JavaScript。你输入的任何值 都不会发到服务器、不记录、不用于分析。唯一要注意的:主输入和 模式会同步到可分享的 URL(`?v=1200&m=layout`),所以你把"分享 链接"粘到聊天里时,对方服务器的访问日志会留下这个数字。布局 尺寸通常不敏感,但如果数值本身保密,手动复制结果而不是分享 URL。你的精度和模式偏好只存在这个浏览器的 localStorage 里, 不离开设备。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。