使用 clamp() 函数可以实现流式动态响应式字号，其核心做法是设置最小值、首选值和最大值，例如 font-size: clamp(1rem, 2.5vw, 2rem);。浏览器会根据视口宽度自动计算中间的首选值，并在超出最小或最大范围时进行限制。这种方法无需编写媒体查询即可实现平滑的字体缩放。
clamp() 的三个参数分别代表什么含义
clamp() 接受三个参数：最小值、首选值和最大值。最小值是字体不会小于的基准，通常对应移动端的最小可读字号；首选值是随视口变化的流体值，常使用 vw 单位结合线性计算得出；最大值是字体在宽屏设备上不会超过的上限，防止文字过大影响阅读。这三个值共同决定了字体的变化区间。
/* CSS 代码示例 */
html {
font-size: 16px;
}
body {
/* 最小 16px (1rem)，最大 32px (2rem) */
/* 首选值根据视口宽度在两者之间线性插值 */
font-size: clamp(1rem, 2.5vw + 0.5rem, 2rem);
}
h1 {
/* 更激进的缩放比例 */
font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}上述代码中，body 的字体大小将在 16px 到 32px 之间流动变化。当视口较窄时，字体保持 16px；当视口变宽时，字体按 2.5vw + 0.5rem 的比例增大，直到达到 32px 后不再增加。h1 标题则拥有更大的缩放幅度，从 24px 到 48px 流动变化。
立即学习“前端免费学习笔记（深入）”；
如何计算合适的流体字号首选值
计算流体字号首选值的关键在于确定最小和最大断点处的字号，然后利用线性方程求出斜率和截距。假设在最小断点 min-width 处字号为 min-font，在最大断点 max-width 处字号为 max-font，则首选值公式为 (max-font - min-font) / (max-width - min-width) * vw + offset。实际开发中可使用在线工具或简单代数快速求解。
/* 计算示例：从 768px 处的 16px 到 1200px 处的 24px */
/* 斜率 k = (24 - 16) / (1200 - 768) = 8 / 432 ≈ 0.0185 */
/* 截距 b = 16 - 0.0185 * 768 ≈ 1.71 */
/* 因此首选值约为 1.85vw + 1.71rem */
.container {
font-size: clamp(1rem, 1.85vw + 1.71rem, 1.5rem);
}通过这种方式，可以精确控制字体在不同屏幕尺寸下的表现。确保在极端视口下字体依然可读，同时在宽屏上获得足够的视觉冲击力。避免使用过大的 vw 系数，否则在小屏幕上可能导致字体过小难以辨认。
在特定输入条件下 clamp() 的行为验证
当视口宽度小于最小值对应的断点时，clamp() 始终返回最小值；当视口宽度大于最大值对应的断点时，始终返回最大值；只有在两个断点之间时，才返回计算出的首选值。这一行为可以通过调整浏览器窗口大小并观察控制台输出的字体大小来验证。
