跳到正文
FluidClamp
语言: 简体中文

从 16px 到 24px 的 CSS clamp()

此计算器已预填好一个尺寸:在小屏幕上为 16px(1rem),在宽屏幕上增长到 24px(1.5rem)。你可以修改任意字段进行微调。

输入单位
输出单位

常用预设

你的 clamp() 值

clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

斜率: 0.8333vw · 截距: 0.8333rem

CSS
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)
CSS 自定义属性
--fluid-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
Tailwind 类名
text-[clamp(1rem,0.8333rem_+_0.8333vw,1.5rem)]

最大值是最小值的 1.5 倍,符合 WCAG 1.4.4「调整文字大小」常用的 2.5 倍上限。

各视口下的渲染尺寸
视口尺寸 (px)尺寸 (rem)
320px161
375px16.461.0286
768px19.731.2333
1024px21.871.3667
1280px241.5
1440px241.5
1920px241.5

所有设置都保存在网址中,你可以收藏或分享这个结果。

实时预览

视口 1024px 时为 21.87px

流式字体随屏幕宽度平滑变化。

16–24px 的 clamp() 值

当视口范围为 320px 到 1280px 时,结果是 clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)。视口每增加 100px,尺寸增加 0.83px:在 768px 的平板上约为 19.7px,在 1024px 时约为 21.9px,从 1280px 起固定为 24px。

首选值由固定的 rem 部分和 vw 部分组成。rem 部分让文字与读者的浏览器字号保持关联,vw 部分负责增长。如果你的布局容器停止变宽的位置更早或更晚,请修改上方的视口字段。

什么时候使用 16px 到 24px

16 到 24px 很适合导语段落、引言和小标题。它在手机上与普通正文一样大,在桌面上变成醒目的 24px,既增加了强调,又没有真正标题那么重。

最大值是最小值的 1.5 倍,在 WCAG 1.4.4「调整文字大小」常用的 2.5 倍上限之内,因此浏览器缩放仍能按预期放大这个尺寸。

这些数字是如何算出来的

斜率 =(24 − 16)÷(1280 − 320)= 0.0083,即 0.8333vw。截距 = 16 − 斜率 × 320 = 13.33px,在根字号为 16px 时等于 0.8333rem。这两个数构成 clamp() 的中间参数;第一个和最后一个参数就是换算成 rem 的最小值和最大值。

在项目中使用

把这个值粘贴到 font-size 声明中,存入 --fluid-size 这样的自定义属性,或者使用 Tailwind 类名 text-[clamp(1rem,0.8333rem_+_0.8333vw,1.5rem)]。如果你需要一整套相关的尺寸,字号比例生成器可以用相同的视口范围,围绕基准字号生成各级尺寸。

常见问题

16px 等于多少 rem?

在浏览器默认的 16px 根字号下,16px 等于 1rem,24px 等于 1.5rem。如果你的网站使用了不同的根字号,修改「根字号」字段,rem 值就会随之更新。

在手机上文字会有多大?

在 375px 宽的手机视口中,该值约为 16.5px。在 320px 及以下,它保持最小值 16px。

在大显示器上会超过 24px 吗?

不会。从 1280px 的视口宽度开始,clamp() 返回最大值 24px,因此在 1920px 或超宽屏幕上尺寸不会继续增大。

这个值能用于 padding 或 gap 吗?

可以。任何 CSS 长度的计算方式都完全相同。流式间距计算器还会输出 p-[…] 或 gap-[…] 等专用于间距的 Tailwind 类名。