CSS clamp() 计算器如何计算 vw 斜率？

它在你的两个锚点之间画一条直线：斜率 =（maxSize − minSize）/（maxViewport − minViewport）。因为 100vw 等于视口宽度，所以值中的 vw 系数就是该斜率乘以 100，而 rem 截距是把这条线延伸回零宽视口时剩下的部分。

为什么中间项混用了 rem 和 vw？

首选值是一条直线：一个不依赖宽度的固定部分（rem 截距）加上一个随视口增长的部分（vw 斜率）。二者混用可让尺寸在你的最小值和最大值之间平滑缩放，而不是在断点处跳变。

clamp 边界我应该用 px 还是 rem？

rem 边界会尊重用户浏览器的字号设置，对无障碍更友好，因此本工具默认输出 rem。你可以把读数切换为 px，但对文本尺寸而言，rem 的 clamp 边界是更稳妥的选择。

我可以把同一个 clamp() 值用于外边距和间距吗？

可以。clamp() 适用于任何长度，因此该值同样可用于 padding、margin、gap 和网格轨道，而不仅仅是 font-size。以流式间距预设为起点，再调整最小和最大尺寸即可。

我应该输入什么根字号？

使用你页面在 html 元素上设置的值——16px 是浏览器默认值，也是本工具的默认值。如果你在别处缩放了根字号，请输入那个值，让 rem 输出映射到你实际看到的像素。

我输入的尺寸会被上传到任何地方吗？

不会。CSS clamp() 计算器完全在你的浏览器中运行。你输入的视口宽度和尺寸仅用于在你的设备上计算该值，绝不会发送到 ArrayKit。

CSS clamp() 计算器

把最小和最大尺寸加上两个视口宽度，转换为一个流式的 CSS clamp() 值，在你的浏览器中实时计算。

这款 CSS clamp() 计算器完全在你的浏览器中运行。你输入的视口宽度、尺寸和根字号绝不会离开你的设备，也不会有任何内容上传到 ArrayKit。

打开 CSS 单位换算器

关于 CSS clamp() 计算器

这款 CSS clamp() 计算器可将四个数字——以像素表示的最小和最大尺寸，加上它们对应的两个视口宽度——转换为一个可直接粘贴的 clamp() 值，用于流式排版和间距。它在你的两个锚点之间拟合一条直线，算出 vw 斜率和 rem 截距，并在小视口以下钉住你的最小值、在大视口以上钉住你的最大值。实时预览滑块会显示在中间任意宽度下的精确渲染尺寸，让你在上线前就能凭肉眼查看这条渐变。你可以复制原始的 clamp() 值、一条 font-size 声明，或一个 Tailwind 任意值。一切都在你的设备上计算——你输入的尺寸留在浏览器中，不会有任何内容上传到 ArrayKit。

功能特性

从四个数字生成 clamp(minRem, slopeVw + interceptRem, maxRem) 值
实时预览滑块，显示任意视口宽度下的渲染尺寸
设置你自己的根字号，以控制 px → rem 的换算
读出该值背后精确的 vw 斜率和 rem 截距
复制原始 clamp() 值、一条 font-size 声明，或一个 Tailwind 类
内置正文、标题、主视觉字号和流式间距的预设
支持随视口增大而缩小尺寸的递减渐变
完全在你的浏览器中运行，不向任何地方发送任何尺寸

如何使用 CSS clamp() 计算器

以像素输入你的最小和最大视口宽度
输入元素在这两个宽度下应达到的最小和最大尺寸
如果根字号不是默认的 16px，请进行调整
拖动预览滑块，查看整个区间内的渲染尺寸
将 clamp() 值或 CSS 声明复制进你的样式表

示例

输入

min viewport 320px, max viewport 1200px
min size 16px, max size 24px, root 16px

输出

font-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);

320px 处的 16px 在 1200px 处增长到 24px，并在该区间之外保持平直。

常见错误与故障排除

文本从未超过最小尺寸增长。 — 请检查最小视口是否小于最大视口——区间颠倒会让渐变变平，导致首选项在两个边界之间永远不会生效。
更改根字号后尺寸看起来不对。 — clamp() 中的 rem 是相对于根元素的。如果你的页面把 html { font-size } 设为 16px 以外的值，请匹配根字号字段，让 rem 输出解析出你预期的像素。
在非常宽的屏幕上，值缩放得太激进。 — 中间项会一直上升到最大视口。请降低最大视口宽度或最大尺寸，让渐变更早到达上限，并在那之外保持封顶。
clamp() 在较旧的浏览器中被忽略。 — clamp() 在现代浏览器中已广泛支持。对于非常老的目标，请先提供一个静态 font-size 作为回退，让 clamp() 在受支持处覆盖它。

常见问题

CSS clamp() 计算器如何计算 vw 斜率？: 它在你的两个锚点之间画一条直线：斜率 =（maxSize − minSize）/（maxViewport − minViewport）。因为 100vw 等于视口宽度，所以值中的 vw 系数就是该斜率乘以 100，而 rem 截距是把这条线延伸回零宽视口时剩下的部分。
为什么中间项混用了 rem 和 vw？: 首选值是一条直线：一个不依赖宽度的固定部分（rem 截距）加上一个随视口增长的部分（vw 斜率）。二者混用可让尺寸在你的最小值和最大值之间平滑缩放，而不是在断点处跳变。
clamp 边界我应该用 px 还是 rem？: rem 边界会尊重用户浏览器的字号设置，对无障碍更友好，因此本工具默认输出 rem。你可以把读数切换为 px，但对文本尺寸而言，rem 的 clamp 边界是更稳妥的选择。
我可以把同一个 clamp() 值用于外边距和间距吗？: 可以。clamp() 适用于任何长度，因此该值同样可用于 padding、margin、gap 和网格轨道，而不仅仅是 font-size。以流式间距预设为起点，再调整最小和最大尺寸即可。
我应该输入什么根字号？: 使用你页面在 html 元素上设置的值——16px 是浏览器默认值，也是本工具的默认值。如果你在别处缩放了根字号，请输入那个值，让 rem 输出映射到你实际看到的像素。
我输入的尺寸会被上传到任何地方吗？: 不会。CSS clamp() 计算器完全在你的浏览器中运行。你输入的视口宽度和尺寸仅用于在你的设备上计算该值，绝不会发送到 ArrayKit。