Developer Design Utility
CSS Clamp 生成器
输入最小尺寸、最大尺寸和视口范围，即可生成适用于响应式 font-size、padding、margin、gap 等属性的 CSS clamp() 值。
Clamp 值输入
输入最小/最大尺寸和视口范围后，会自动计算 CSS clamp() 代码。
预览
可以查看生成的 clamp() 值如何随屏幕尺寸变化而应用。
查看会随着屏幕尺寸自然变化的响应式 CSS 值。
生成结果
可以查看计算后的 clamp() 值和 CSS 代码。
请输入数值后点击生成 Clamp 按钮。
推荐使用示例
clamp() 特别适合在响应式 UI 中需要尺寸变化的元素。
帮助
什么是 CSS Clamp 生成器？
CSS Clamp 生成器是一款免费的开发者工具，可以轻松创建由最小值、首选值和最大值组成的 CSS clamp() 函数。它适用于响应式字体大小、间距、卡片间隔、圆角等需要随屏幕尺寸自然变化的样式。
clamp() 基本结构
clamp() 的写法是 clamp(最小值, 首选值, 最大值)。在小屏幕上不会小于最小值，在大屏幕上不会大于最大值，中间区间会利用 vw 单位自然变化。
如何确定输入值
- 最小尺寸：在移动端屏幕上保持的最小值。
- 最大尺寸：在桌面端屏幕上保持的最大值。
- 最小视口：数值开始增大的基准屏幕宽度。
- 最大视口：数值不再继续增大的基准屏幕宽度。
支持功能
- 自动计算 CSS clamp()
- 设置最小尺寸和最大尺寸
- 设置最小视口和最大视口范围
- 选择 font-size、padding、margin、gap、border-radius 等属性
- 选择 rem 或 px 输出方式
- CSS 变量代码生成选项
- 响应式预览和基于当前视口的预计值
- 复制生成的 CSS 代码
可以用于这些工作
- 创建响应式标题字体大小
- 设置移动端和桌面端之间自然变化的间距
- 调整卡片 UI 的 padding、gap、border-radius
- 计算落地页 hero title 的尺寸
- 整理博客主题的正文尺寸和间距
- 为设计系统设计流式 CSS 值
CSS Clamp 生成器用户常见需求
搜索 CSS Clamp Generator、CSS clamp 计算器、响应式字体大小计算、Fluid Typography Generator、响应式 CSS 值生成器的用户，大多是为了创建在移动端和桌面端之间自然变化的 CSS 值。
clamp() 只能用于 font-size 吗？
不是。除了 font-size 之外，它也可以用于 padding、margin、gap、width、border-radius 等接受数值单位的多种 CSS 属性。
rem 输出和 px 输出哪个更好？
通常从无障碍和可维护性的角度来看，rem 输出更好。不过，如果现有项目是基于 px 的，也可以使用 px 输出。
最小视口和最大视口应该如何设置？
常见移动端基准是 360px 或 375px，桌面端基准是 1200px 或 1440px。可以根据项目实际布局基准进行调整。
clamp() 使用太多可以吗？
在需要的地方使用没有问题，但如果无条件应用到所有属性，设计管理可能会变得困难。建议优先用于标题、间距、卡片间隔等响应式变化重要的地方。
注意事项
clamp() 已被现代浏览器广泛支持，但在实际应用前仍建议确认项目需要支持的浏览器范围。另外，不建议无条件应用到所有属性，而应优先用于字体大小、间距、间隔等真正需要流式变化的值。