无需登录 数据私有 本地保存

CSS Clamp() 生成器 - 最小/首选/最大字体

15
0
0
0

CSS Clamp() 生成器

生成流畅的响应式字体大小 — 最小/首选/最大，告别繁琐的媒体查询

参数设置

快速预设
字体大小范围
px
px
最大值需大于最小值
视口宽度范围
px
px
最大值需大于最小值
输出单位
px

生成的 CSS

font-size: clamp(16px, calc(13.09px + 0.9091vw), 20px);
基于视口 320px – 1200px，字体 16px – 20px

实时预览

模拟视口宽度 1200px
200px 1920px
天地有大美而不言
模拟字体大小：20px 占范围：100%
最小 16px 最大 20px
实际 clamp() 效果（随真实视口变化）
天地有大美而不言 — 调整浏览器窗口大小观察变化
当前真实视口宽度：0px

关键视口下的字体大小

视口宽度 字体大小 状态
320px16px最小值
480px—
768px—
1024px—
1200px20px最大值
1440px20px已封顶

常见问题 (FAQ)

clamp() 是 CSS 数学函数，接收三个参数：最小值、首选值、最大值。它返回首选值，但会被限制在最小值和最大值之间。语法为 clamp(MIN, PREFERRED, MAX)。用于响应式排版时，首选值通常使用 vw 单位，使字体大小随视口宽度线性缩放，同时被最小/最大值约束，避免过小或过大。

使用 clamp() 可以用一行代码替代多段媒体查询。传统的响应式排版需要在不同断点手动设置字体大小，而 clamp() 让字体在最小和最大视口之间平滑过渡，无需跳跃式断点，代码更简洁、维护更方便。

clamp() 在现代浏览器中得到广泛支持，包括 Chrome 79+、Firefox 75+、Safari 13.1+、Edge 79+。覆盖了约 96%+ 的全球用户。对于极少数不支持的旧浏览器，可以设置一个合理的固定字体大小作为回退。

通常最小视口宽度设为移动端设计稿宽度（如 320px 或 375px），最大视口宽度设为大屏桌面断点（如 1200px 或 1440px）。在这个范围内字体平滑缩放；范围之外字体保持最小值或最大值。建议根据实际内容容器宽度来设定，而非盲目使用全屏宽度。

首选值使用公式：calc(Y + S * 100vw)，其中 S（斜率）= (最大字体 - 最小字体) / (最大视口 - 最小视口)，Y（截距）= 最小字体 - S × 最小视口。S × 100 得到 vw 系数，表示每 1vw 视口变化对应的字体变化量。这个工具会自动完成所有计算。

推荐使用 rem，因为它尊重用户的浏览器字体大小设置，可访问性更好。如果用户将浏览器默认字体调大，rem 值会相应缩放。px 值更精确但在可访问性方面略逊。无论选择哪种，clamp() 的行为逻辑完全相同。本工具支持两种输出，并允许自定义 root 字体大小（默认 16px）。

当然！clamp() 可用于任何接受长度值的 CSS 属性，如 width、padding、margin、gap、line-height、border-radius 等。任何需要响应式缩放且需要上下限约束的场景都能使用 clamp()。例如 width: clamp(280px, 80vw, 800px) 可创建响应式容器。
🔧 相关工具