这个工具是什么
CSS Clamp Generator 把最小值、随视口变化的首选值与最大值组成 CSS clamp()，让尺寸在合理边界内变化。页面提供即时文本预览与明确的 CSS 输出。
如何使用
- 选择生成模式，并填写相应尺寸与单位。
- 确认最小值不大于最大值。
- 查看输出与文字预览；流式模式还需提供递增的视口区间。
- 复制 CSS，并在目标项目的不同视口宽度下检查效果。
使用示例
- clamp(16px, 2vw, 32px) 将字体约束在 16～32px。
- 16→32px、视口 320→1200px，流式公式在两个端点分别得到 16px 与 32px。
- 超出指定视口范围后，尺寸停留在最小或最大边界。
font-size: clamp(16px, 2vw, 32px);
/* 16px at 320px viewport; 32px at 1200px viewport */
font-size: clamp(16px, calc(10.181818px + 1.818182vw), 32px);原理与 CSS 说明
clamp(min, preferred, max) 在最小与最大边界之间采用首选值。流式计算使用 slope = (maxSize − minSize) / (maxViewport − minViewport)，intercept = minSize − slope × minViewport，首选值为 calc(intercept px + slope × 100vw)。
常见用途
- 设置具有上下限的响应式标题。
- 用线性插值连接两个字体尺寸。
- 减少仅为调整字号而增加的媒体查询。
隐私说明
所有输入、计算、CSS 生成和预览都在当前浏览器中完成，不会上传用户内容，不使用后台、数据库、在线 API 或第三方 CDN，也不会自动保存您的输入。
FAQ
CSS clamp() 是什么？
clamp() 是 CSS 数学函数，用下限和上限约束中间的首选值。
三个值分别代表什么？
依次是最小值、首选值、最大值；本工具会验证尺寸与单位，并拒绝颠倒的边界。
为什么适合响应式字体？
首选值可以使用 vw 随视口改变，同时由两侧边界限制过小或过大的文字。
流式模式为什么需要两个不同视口？
两个视口确定线性插值区间，最大视口必须大于最小视口，避免除零或反向区间。
clamp() 的浏览器支持如何？
现代主流浏览器已广泛支持。若项目需要兼容较旧浏览器，可在 clamp() 声明前提供固定尺寸作为回退。