clamp() 是最直接有效的响应式字体方案，支持现代浏览器，通过 font-size: clamp(最小值, 视口比例值, 最大值) 实现平滑缩放，避免小屏过小、大屏过大，配合无单位 line-height 和 viewport 元标签可保障效果稳定。
clamp() 是目前最直接有效的方案，它能避免断点跳跃、减少媒体查询嵌套，且浏览器支持已覆盖所有现代环境（Chrome 79+、Firefox 75+、Safari 13.1+）。
用 clamp() 实现平滑缩放
核心是写成 font-size: clamp(最小值, 视口比例值, 最大值)，比如：h1 { font-size: clamp(1.5rem, 4.2vw, 2.8rem); }
这表示：当 4.2vw 小于 1.5rem（约24px），就取 1.5rem；大于 2.8rem（约44.8px），就取 2.8rem；中间区间则线性插值。实际效果比纯 vw 更稳，尤其在小屏上不会缩得太小。
- 别直接用
vw单位（如font-size: 4vw），iPhone SE（375px 宽）下会缩到约15px，肉眼难辨 -
clamp()的三个参数必须单位兼容：前/后两个可以是rem/px，中间那个必须是vw或vh，不能混em - 如果标题父容器有
max-width限制，vw仍按视口算，不是按容器宽——这是常见误解
搭配 line-height 避免行距崩塌
字号动态变，行高也得跟着“活”起来。固定像素行高（如 line-height: 24px）在小屏会挤，在大屏会松散。
推荐统一用无单位数值：h1 { line-height: 1.2; }
它会自动乘以当前 font-size 得到真实行高。若需微调响应性，可再加一层 clamp()：line-height: clamp(1.15, 1.05 + 0.002vw, 1.3);
- 避免用
em写line-height，它会继承父级字体大小，容易在嵌套中失控 - 别给标题设
white-space: nowrap后还指望clamp()自动适配——文字撑出容器时，缩放失效且可能溢出 - 如果用了
text-overflow: ellipsis，必须配合display: block和overflow: hidden，否则clamp()缩小后仍可能换行错乱
当 clamp() 不够用时，回退到 :root + @media
某些极端场景——比如设计稿明确要求在 768px、1024px、1440px 三档精准控制字号，或需要同步调整字间距、行高、字重——clamp() 的线性插值就不够精确。
这时应改用根元素调控：
:root { font-size: 16px; }<br>
@media (max-width: 768px) { :root { font-size: 14px; } }<br>
@media (max-width: 480px) { :root { font-size: 12px; } }然后标题用
rem：h1 { font-size: 2.5rem; }（即 40px / 35px / 30px）
- 务必确认 HTML 里有
<meta name="viewport" content="width=device-width, initial-scale=1">，否则@media在移动端根本不会触发 - 不要在
@media里单独改某个h1的font-size，而忽略其父容器或:root，否则rem计算链会断裂 -
calc()可作补充，比如font-size: calc(1rem + 0.5vw)，但它没有下限保障，小屏仍可能过小，建议只用于辅助微调
clamp()，而是判断什么时候该让它“动”，什么时候该用断点“钉死”。比如导航栏里的标题要和图标尺寸对齐，就必须用 @media 精确卡住；而文章主标题追求阅读流畅感，clamp() 才是更自然的选择。 
