使用 clamp() 函数实现响应式字体缩放，核心在于设置最小值、首选值和最大值三个参数。具体做法是调用 font-size: clamp(min, preferred, max)，浏览器会根据视口宽度自动计算并应用介于最小和最大之间的数值，从而在移动端保持可读性，在桌面端提供舒适的阅读体验。
如何确定 clamp 的三个关键参数
确定参数的关键在于理解视口单位与固定单位的结合。首选值通常使用 vw（视口宽度）来驱动缩放，而最小值和最大值则使用 rem 或 px 来限制极端情况下的显示效果。例如，设置 clamp(1rem, 2.5vw, 2rem) 意味着字体至少为 16px，理想状态下随视口按 2.5% 缩放，但最大不超过 32px。
/* CSS 代码示例 */
html {
font-size: 16px;
}
.responsive-text {
/* 最小 1rem (16px), 首选 4vw, 最大 2rem (32px) */
font-size: clamp(1rem, 4vw, 2rem);
}
上述代码中，当视口宽度较小时，字体锁定在 16px；随着视口变宽，字体按比例增大；当视口达到一定宽度（如 800px）时，字体不再增长，稳定在 32px。这种写法无需媒体查询即可实现平滑过渡。
如何在不同断点下优化字体层级
在不同屏幕尺寸下优化字体层级，需要为标题、正文和辅助文本分别定义不同的 clamp() 组合。通过调整首选值的 vw 系数，可以控制不同元素对视口变化的敏感度。例如，H1 标题可以使用较大的 vw 系数以体现视觉冲击力，而正文则使用较小的系数以保证稳定性。
/* CSS 代码示例：多元素响应式字体 */
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
h2 {
font-size: clamp(1.25rem, 4vw, 2.5rem);
}
p {
font-size: clamp(1rem, 1.5vw, 1.25rem);
}
在实际项目中，建议先根据设计稿确定各元素的基准字号和最大字号，再反推合适的 vw 系数。例如，若希望 H1 在 1920px 视口中达到 3rem（48px），而在 320px 视口中不低于 1.5rem（24px），可通过计算得出合适的中间值。这种方法能确保字体在任何设备上都能保持良好的可读性和视觉层次。
当视口宽度小于首选值对应的临界点时会发生什么
当视口宽度小于首选值对应的临界点时，clamp() 会返回其最小值。这意味着字体大小将不再随视口缩小而减小，而是保持在设定的最小阈值，从而避免文字过小导致无法阅读。这一行为确保了在小屏设备上的基本可用性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
