14–16px 的 clamp() 值
当视口范围为 320px 到 1280px 时,结果是 clamp(0.875rem, 0.8333rem + 0.2083vw, 1rem)。视口每增加 100px,尺寸增加 0.21px:在 768px 的平板上约为 14.9px,在 1024px 时约为 15.5px,从 1280px 起固定为 16px。
首选值由固定的 rem 部分和 vw 部分组成。rem 部分让文字与读者的浏览器字号保持关联,vw 部分负责增长。如果你的布局容器停止变宽的位置更早或更晚,请修改上方的视口字段。
什么时候使用 14px 到 16px
14 到 16px 的范围适合次要文字:图片说明、表单提示、表格单元格、脚注和紧凑的导航。变化很细微,在桌面上让文字更舒适,在手机上又不额外占用空间。可以搭配 16–18px 的正文字号,保持清晰的层级。
最大值是最小值的 1.14 倍,在 WCAG 1.4.4「调整文字大小」常用的 2.5 倍上限之内,因此浏览器缩放仍能按预期放大这个尺寸。
这些数字是如何算出来的
斜率 =(16 − 14)÷(1280 − 320)= 0.0021,即 0.2083vw。截距 = 14 − 斜率 × 320 = 13.33px,在根字号为 16px 时等于 0.8333rem。这两个数构成 clamp() 的中间参数;第一个和最后一个参数就是换算成 rem 的最小值和最大值。
在项目中使用
把这个值粘贴到 font-size 声明中,存入 --fluid-size 这样的自定义属性,或者使用 Tailwind 类名 text-[clamp(0.875rem,0.8333rem_+_0.2083vw,1rem)]。如果你需要一整套相关的尺寸,字号比例生成器可以用相同的视口范围,围绕基准字号生成各级尺寸。