使用 clamp() 实现流式响应式字体大小，核心在于设置最小值、理想值和最大值三个参数。具体做法是调用 font-size: clamp(min, ideal, max)，浏览器会根据视口宽度自动计算并选取介于最小和最大之间的值，从而实现平滑缩放。
clamp() 的三个参数分别代表什么
这三个参数依次是最小值、理想值和最大值。最小值是字体不会缩小的底线，通常设为固定单位如 rem；理想值是希望达到的基准尺寸，常结合视口单位如 vw 或 vh 进行动态计算；最大值是字体不再增大的上限，同样使用固定单位。这种组合确保了在小屏幕上可读，在大屏幕上不溢出。
body {
font-family: sans-serif;
}
h1 {
/* 最小 1.5rem，理想 5vw，最大 3rem */
font-size: clamp(1.5rem, 5vw, 3rem);
}
p {
/* 最小 1rem，理想 2vw，最大 1.25rem */
font-size: clamp(1rem, 2vw, 1.25rem);
}上述代码中，当视口较小时，h1 保持 1.5rem 不变；随着视口增大，字体按 5vw 比例增长；当计算结果超过 3rem 时，则锁定在 3rem。这种写法无需媒体查询即可覆盖多种屏幕尺寸。
立即学习“前端免费学习笔记（深入）”；
如何避免 clamp() 导致的布局抖动
布局抖动通常发生在字体尺寸变化导致行高或容器高度剧烈波动时。解决方法是为包含字体的容器设置固定的最小高度或使用 line-height 配合相对单位，确保即使字体缩放，文本块的整体结构保持稳定。此外，避免在极窄视口下使用过大的 vw 系数，以防字体瞬间膨胀撑破布局。
.card {
min-height: 4rem; /* 防止内容过少时塌陷 */
padding: 1rem;
border: 1px solid #ccc;
}
.card-title {
font-size: clamp(1.2rem, 3vw + 0.5rem, 2rem);
line-height: 1.4;
}
.card-text {
font-size: clamp(0.9rem, 1.5vw + 0.2rem, 1.1rem);
line-height: 1.6;
}在卡片组件中，通过设置 min-height 和合理的 line-height，可以确保字体在 clamp() 动态调整时，卡片容器的视觉稳定性。例如，当标题从 1.2rem 增长到 2rem 时，行高按比例增加，但容器不会因内容突然增多而意外重排，除非内容本身超出预设空间。
当视口宽度小于最小值对应的断点时会发生什么
当视口宽度缩小到使得 ideal 计算值低于 min 时，clamp() 会直接返回 min 值。这意味着字体将停止缩小，保持在设定的最小可读尺寸。这一行为保证了即使在极小屏幕（如旧款手机）上，文字依然清晰可辨，不会因为视口过小而变得不可读。开发者应确保 min 值符合无障碍阅读标准，通常不小于 16px 或 1rem。
