如何为流畅的字体大小生成 CSS clamp()？

输入最小尺寸 (px)、最大尺寸 (px)、最小视口 (px) 和最大视口 (px)。该工具会输出一个可直接复制的 CSS 值，例如 clamp(1rem, ..., 2rem)，其中包含一个基于 vw 的首选值，介于你设定的两个尺寸之间。

我应该选择 rem 还是 px 输出？

使用输出单位选择器。选择 rem 时，像素值会除以根字体大小 (px)（默认为 16），这样文本会遵循用户的浏览器字体设置。像素输出则给出固定的 px 值。

可以。在 CSS 值下方有一个 Tailwind 类，格式为 text-[clamp(...)]，空格被替换为下划线。使用它自带的复制按钮进行复制。它使用 text- 前缀，用于其他属性时请自行修改。

当最大尺寸超过最小尺寸的 2.5 倍时，会出现一条无障碍提示：缩放后的文本可能无法达到其原始大小的 200%（WCAG 1.4.4）。请将最大值保持在最小值的 2.5 倍或以下。

将预览滑块拖动到 320 到 1920 px 之间的任意视口宽度。示例文本及其计算出的像素大小会实时更新，同时也会显示在最小、中间和最大视口下的尺寸。

是的。所有工具均可免费使用，无需账号，无需信用卡。处理在你的设备上进行，而不是在我们的服务器上，这正是它能保持免费的原因。

可以。它可在 iOS 和 Android 的主流手机浏览器中运行，无需安装任何东西。

📐

为响应式排版和间距生成流体 CSS clamp() 值。设置最小/最大尺寸和视口范围，实时预览，复制单行 CSS。

在浏览器中运行无需注册，无弹窗无需登录永久免费

加载后可离线使用

最小尺寸 (px)

最大尺寸 (px)

最小视口 (px)

最大视口 (px)

输出单位：

根字体大小 (px)

CSS 值

font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);

Tailwind 类

text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]

拖动预览任何视口768px 宽 → 21.9px

Aa 22px

不同视口下的渲染尺寸

375px 宽Aa 16px

908px 宽Aa 24px

1440px 宽Aa 32px

clamp(min, preferred, max) 根据视口流畅地缩放数值，并在最小值和最大值处锁定。它用一行代码取代了针对排版、间距和宽度的多个媒体查询。

此工具使用手写的线性插值公式计算 CSS clamp() 值——没有库、没有服务器往返。你输入两个尺寸和两个视口宽度；计算在浏览器中即时完成，生成一个可直接粘贴的 clamp() 表达式，其中基于 vw 的首选值会让字号或间距在这两个断点之间平滑缩放。

1
线性斜率计算
工具计算每像素的斜率：(maxSize - minSize) / (maxViewport - minViewport)。然后将此斜率乘以 100 转换为 vw 单位，这正是 CSS 视口相对缩放的核心原理。
2
推导截距
计算一个截距偏移（px 或 rem），使线性函数在最小视口处恰好等于你的最小尺寸。斜率和截距共同构成 clamp() 中的首选值——也就是实际缩放的部分。
3
单位换算与输出格式化
如果选择 rem 输出，每个像素值都会先除以你设置的根字号（默认 16px），再写入 clamp() 字符串。同时还会生成对应的 Tailwind 任意值类，按 Tailwind 语法将空格替换为下划线。
4
实时视口滑块预览
范围滑块可以在 320px 到 1920px 宽度之间拖动。在每个位置，同样的斜率和截距公式会实时计算限定后的尺寸，并以该像素大小渲染示例文本，让你在复制之前就能看到缩放效果。