CSS clamp() 生成器
将最小与最大字号以及最小与最大视口宽度转换为一行无需断点的 CSS clamp() 流式排版表达式。
正在加载工具…
CSS clamp() 生成器 — 输入最小和最大字号，以及它们应跨越缩放的视口范围，工具会用经过验证的 Utopia 线性插值算法为你生成可直接粘贴的 clamp() 值。结果会在你设定的上下限之间平滑缩放，完全不需要媒体查询。所有计算都在你的浏览器中用纯 JavaScript 完成——任何数值都不会上传到服务器，你的数据始终保密。
CSS clamp() 生成器 是什么？
CSS clamp() 生成器是一款面向前端开发者和设计师的免费流式排版计算器。你提供最小字号、最大字号、最小视口宽度和最大视口宽度，它会返回一个 clamp(最小值, 首选值, 最大值) 声明，其中首选值由 rem 偏移量和 vw 斜率组合而成，因此文字随屏幕线性增长且永不越界。这样就无需层层叠加的字号媒体查询，让标题和正文在各种设备上都能自适应。选择预览尺寸查看实际渲染效果，在 rem 与 px 之间切换输出单位，然后将这一行直接复制到样式表中。
如何使用 CSS clamp() 生成器
- 输入最小字号——文字在最小屏幕上应有的大小。
- 输入最大字号——文字在最大屏幕上应达到的大小。
- 设置字号应在其间缩放的最小和最大视口宽度。
- 如有需要，打开设置切换输出单位（rem 更利于可访问性，也可选 px）。
- 选择一个预览尺寸，在该视口下渲染示例文字，并查看实时的 clamp() 值。
- 复制生成的 clamp() 表达式，粘贴到你的 CSS font-size 中。
示例
正文 16px 到 20px
输入
最小字号 16, 最大字号 20, 最小视口 320, 最大视口 1240
输出
font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);
主标题 32px 到 64px
输入
最小字号 32, 最大字号 64, 最小视口 320, 最大视口 1536
输出
font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);
小标签，固定范围
输入
最小字号 12, 最大字号 14, 最小视口 480, 最大视口 1280
输出
font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);
常见问题
- clamp() 值为什么不用媒体查询也能缩放？
- clamp(最小值, 首选值, 最大值) 接受一个下限、一个首选（流式）值和一个上限。首选值是一条 rem + vw 形式的直线，经过计算使字号在最小视口时等于你的最小值，在最大视口时等于你的最大值。在这两个宽度之间，浏览器会自动插值；超出范围时，clamp() 会把字号锁定到最近的边界——全部只用一条声明。
- 为什么输出是 rem 而不是 px？
- 固定部分使用 rem 会尊重用户浏览器的字号设置，更有利于可访问性；视口相关的斜率则用 vw 表示。如果你的项目需要绝对单位，可以在设置中切换到 px，但 rem 是推荐的默认值。
- 我应该用什么视口范围？
- 常见做法是把最小值设为你支持的最小宽度（通常是 320px 或 360px），把最大值设为你最宽的内容容器（如 1240px–1536px）。字号仅在该范围内完全流动；低于下限时保持最小值，高于上限时保持最大值。
- 这只能用于 font-size 还是任何 CSS 长度都行？
- 都行。生成的 clamp() 值就是一个长度，因此你可以把它粘贴到 padding、margin、gap 或任何接受长度的属性中。标签提到 font-size 只是因为流式排版最常用，但用于间距时算法完全相同。
- 我的数据会被发送到任何地方吗？
- 不会。计算完全在你的浏览器中用 JavaScript 运行——你的字号和视口宽度绝不会上传到任何服务器，因此工具既能保护隐私，页面加载后还能离线使用。