这个 clamp() 计算器如何工作
你只需确定两个点：最窄屏幕上的尺寸，以及最宽屏幕上的尺寸。计算器会在两点之间连一条直线，并把它转换成一个 CSS clamp() 表达式，包含三部分：最小值、首选值和最大值。视口小于最小宽度时保持最小值，大于最大宽度时保持最大值，介于两者之间时则平滑缩放，完全不需要媒体查询。
斜率表示视口每增加 1 像素，数值增加多少像素，以 vw 为单位书写（1vw 等于视口宽度的 1%）。截距是这条直线在视口宽度为 0 时的取值。二者共同构成 clamp() 的中间参数，例如 0.8333rem + 0.8333vw。
为什么输出使用 rem
在首选值中加入 rem 部分，可以让流式文字继续跟随用户在浏览器中设置的默认字号。只用 vw 构成的尺寸会忽略这一偏好，还会削弱页面缩放的效果。因此默认输出为 rem；如果你的设计令牌以像素书写，也可以切换为 px。若项目修改了 html 的字号，请在「根字号」中填写对应数值。
预览、断点与无障碍
拖动视口滑块（320 到 1920 像素），即可看到文字在该宽度下的实际大小。下方表格列出了 320 和 375 像素（手机）、768 和 1024 像素（平板）以及 1280、1440 和 1920 像素（桌面）时的计算结果，方便确认标题在手机上不拥挤、在大显示器上也不过大。
WCAG 成功标准 1.4.4 要求文字可放大到 200% 且内容不丢失。浏览器缩放会同时缩小以 CSS 像素计算的视口宽度，所以变化幅度过大的流式字体在放大时可能长得比预期少。业界常用的经验是让最大值不超过最小值的 2.5 倍，超过时计算器会给出提醒。
分享与导出
所有设置都会写入页面网址，你可以收藏结果或直接发给同事。可以复制纯 clamp() 值、适用于 :root 的 CSS 自定义属性，或 Tailwind 任意值类名。需要一整套字号？切换到「字号比例」模式，即可把模块化比例导出为 CSS 变量。