Developer Design Utility

CSS Clamp 生成器

输入最小尺寸、最大尺寸和视口范围，即可生成适用于响应式 font-size、padding、margin、gap 等属性的 CSS clamp() 值。

Fluid CSS 计算 生成在移动端最小值和桌面端最大值之间自然变化的 clamp() 值。

实时预览 可以根据当前屏幕宽度查看预计 px 值和实际应用效果。

可复制的 CSS 可以直接复制包含选择器、属性和 CSS 变量选项的实用代码。

STEP 1

Clamp 值输入

输入最小/最大尺寸和视口范围后，会自动计算 CSS clamp() 代码。

最小尺寸(px)

最大尺寸(px)

最小视口(px)

最大视口(px)

CSS 属性

自定义属性

选择器

输出单位

rem 输出按 1rem = 16px 换算。目标网站的根字号不同，实际尺寸也会改变。

CSS 变量名

同时生成 CSS 变量代码

STEP 2

预览

可以查看生成的 clamp() 值如何随屏幕尺寸变化而应用。

待机中

Live Preview Responsive CSS Clamp

查看会随着屏幕尺寸自然变化的响应式 CSS 值。

生成 CSS 后显示预览和计算值。

当前视口：- 当前预计值：- 适用范围：-

STEP 3

生成结果

可以查看计算后的 clamp() 值和 CSS 代码。

请输入数值后点击生成 Clamp 按钮。

STEP 4

根据两个视口锚点生成流动 CSS 数值

指定最小、最大尺寸和对应视口宽度，生成字体大小或间距的 clamp() 表达式，并检查代码与当前预览计算值。

编写与核查: win-j
最近核查: 2026-09-30

适用人群

制作响应式字体的开发者
设计流动间距变量的设计师

使用场景

让标题从移动端到桌面端逐渐变大。
让卡片内边距保持在固定范围内变化。

从输入到检查结果

1
以 px 输入最小和最大尺寸。
2
输入最小和最大视口宽度。
3
选择 CSS 属性、选择器和 px 或 rem 输出。
4
按需启用 CSS 变量，然后生成。
5
检查区间内外、页面缩放和根字号变化后的效果。

使用示例 1

32px 至 64px 的标题

输入: 尺寸32–64px · 视口360–1440px · rem
结果: clamp(2rem, 2.963vw + 1.3333rem, 4rem)

根字号为16px时，900px视口下约为48px，系数舍入可能带来微小误差。

使用示例 2

卡片内边距

输入: 尺寸16–32px · 视口375–1200px · rem · padding
结果: padding: clamp(1rem, 1.9394vw + 0.5455rem, 2rem);

视口787.5px、根字号16px时，四边内边距均约为24px。

使用示例 3

负截距

输入: 尺寸10.5–30.5px · 视口400–800px · px
结果: clamp(10.5px, 5vw - 9.5px, 30.5px)

600px视口下为20.5px，低于400px时限制为10.5px，高于800px时限制为30.5px。

计算与处理原理

尺寸差除以视口差得到斜率，再乘100得到vw系数。截距让首选值通过下限锚点。输出保留四位小数，rem固定以16px换算。

限制与注意事项

尺寸必须非负且严格递增；视口至少1px并严格递增。
输出系数限于±1,000,000，舍入后仍需保留非零区间。
根字号变化会改变rem端点及达到限制时的视口位置。
预览列表以外的有效长度属性可能只生成代码，不显示效果。
选择器只用于输出代码，不影响本页其他元素。

数据处理

计算和预览在浏览器内进行，不保存CSS输入。复制结果包含代码和计算条件注释。

参考资料

MDN: clamp()

常见问题

rem 输出一定等于输入的像素吗？

只有在16px换算基准下、忽略舍入误差时一致。根字号20px时，2rem等于40px，请检查目标页面。

能生成随视口增大而缩小的尺寸吗？

本生成器要求最大尺寸大于最小尺寸，不支持递减区间。

为什么编辑后复制按钮不可用？

无效区间或CSS设置会清除旧结果，修正后会重新生成。自动复制失败时，可使用显示的手动复制框。