CSS clamp 在线计算器 - 响应式字号生成

CSS clamp() 流体排版计算器

这款流体排版计算器把两个视口宽度和两个字号转换成可直接粘贴的 CSS clamp() 值，让文字平滑缩放，而不是在媒体查询断点之间生硬跳变。它专为希望文字随屏幕同步增长的开发者和设计师打造。

输入最小和最大视口、选定最小和最大字号，工具就会完成所有运算 —— 斜率、截距和 vw 系数 —— 然后以 rem 或 px 输出可直接用于生产的 font-size 和 line-height。实时预览和内置预设（H1–H6、正文、小号文字）让你在复制前就能调好缩放比例。

隐私优先设计：每一次计算都在你的浏览器中运行。你的数值、预设和生成的 CSS 绝不会上传到任何服务器。

如何使用本计算器

设置视口范围

在视口范围下，输入设计的最小宽度和最大宽度。320px 到 1440px 的范围适用于大多数项目；文字会在两者之间线性缩放。

设置字号

使用滑块或直接输入最小字号（在最小视口下）和最大字号（在最大视口下）。或者点击某个预设 —— H1 到 H6、正文或小号文字 —— 即可载入久经验证的字号和行高值。

调整行高

设置最小和最大行高。标题通常需要更紧凑的间距（1.1–1.2），正文则更宽松（1.5–1.7）。如果两个值相同，输出的将是单一固定行高而非 clamp()。

选择输出单位

在输出设置中，选择 rem（推荐）或 px。使用 rem 时，将基准字号设为项目的根字号 —— 通常为 16px —— 以保证换算准确。

预览并复制

拖动预览视口滑块（320–1920px），观察示例文字如何调整大小，然后点击复制，即可把 CSS 放入剪贴板。

功能特点

生成 CSS clamp()

使用 clamp() 输出可直接用于生产的 font-size，并以 rem 或 px 给出精确计算的斜率（vw）和截距。

流体行高

为行高生成匹配的 clamp()，当最小值与最大值相等时回退为简洁的固定值。

视口范围控制

自定义排版缩放所依据的最小和最大视口宽度，与你自己的断点保持一致。

交互式预览

320px 到 1920px 的视口滑块实时调整示例文字大小，让你清楚看到缩放效果。

8 种排版预设

一键载入 H1–H6 标题、正文和小号文字的合理字号与行高范围。

rem / px 输出

在 rem 和 px 输出之间切换，基准字号可配置，让 rem 值在你的环境中始终准确。

公式拆解

展示逐步运算 —— 斜率、vw 系数、截距和 rem 换算 —— 让你能够核验结果。

一键复制

只需一个按钮，即可把完整的 font-size 和 line-height CSS 复制到剪贴板。

常见问题

什么是流体排版？

流体排版让文字在不同屏幕尺寸间平滑缩放，而不是在固定断点之间生硬跳变。借助 CSS clamp()，字号会随视口宽度变化按比例调整 —— 无需媒体查询。

CSS clamp() 如何作用于字号？

clamp(min, preferred, max) 将一个值约束在最小值和最大值之间。首选值使用 vw 单位，因此会随视口增长，但永远不会低于最小值或高于最大值。例如，font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem) 会让文字从 320px 视口下的 16px 缩放到 1440px 下的 24px。

如何为排版计算 clamp 的值？

首选值（中间值）是视口宽度的线性函数。你需要根据字号差和视口差算出斜率，将其转换为 vw 系数，再求出 rem/px 截距。本计算器会自动完成全部运算，并在计算公式面板中展示推导过程。

输出应该用 rem 还是 px？

大多数情况下使用 rem —— rem 会尊重用户的浏览器字号设置，有利于无障碍访问。只有当你需要不受根字号影响的尺寸时才选 px。使用 rem 输出时，请将基准字号设为项目的根字号，让换算精确无误。

最小和最大视口宽度该取多少？

320px 到 1440px 的范围适用于大多数项目：320px 覆盖最小的常见手机，1440px 是标准的桌面宽度。可根据你自己的统计数据或设计规范调整上下限。

为什么我的行高显示为固定值而不是 clamp()？

当最小和最大行高相同时，没有需要缩放的部分，因此计算器会输出一个固定值，而不是多余的 clamp()。如果希望行高流体缩放，请将最小和最大行高设为不同的值。

clamp() 的浏览器兼容性如何？

很好。CSS clamp() 在所有现代浏览器中均受支持，包括 Chrome 79+、Firefox 75+、Safari 13.1+ 和 Edge 79+。对于极旧的浏览器，可在 clamp() 声明之前添加一个普通的后备 font-size。

响应式文字为什么用 clamp() 而不是媒体查询？

媒体查询会在每个断点处分级生硬地改变尺寸，而且每个元素、每种屏幕尺寸都要单独设值。单个 clamp() 则在两个视口之间连续缩放，文字始终显示得当，需要维护的 CSS 也大幅减少。