响应式字体需用 clamp(16px, 4vw, 28px) 实现平滑缩放并设上下限，辅以媒体查询在 375px、768px、1024px 等断点微调；避免 transform 干扰 vw 计算，并同步设置相对 line-height 和 max-width: 65ch 提升可读性。
响应式字体大小不随屏幕变化，通常是因为只用了固定单位（如 px）或单一的 vw，忽略了视口宽度突变时的可读性断层。真正可靠的方案是：用 vw 提供基础缩放，再用媒体查询在关键断点做“微调校准”，兼顾流畅性和可读性。
用 vw 做基础缩放，但设上下限
vw 单位本身会随视口宽度线性变化，但直接写 font-size: 4vw 在小屏（如 iphone）可能缩到过小（36px）。必须限制范围：
- 用
clamp()最简洁：font-size: clamp(16px, 4vw, 28px);—— 浏览器自动在 16px（最小）、4vw（理想值）、28px（最大）之间平滑过渡 - 不支持
clamp()的老浏览器（如 IE、旧版 safari），改用@supports回退 + 媒体查询组合
在关键断点用媒体查询精细校准
vw 是线性缩放，但人眼对字号变化的敏感度不是线性的。比如从 375px 宽手机切换到 414px 宽 iPhone Plus，4vw 只增加约 1.6px，几乎无感；但到桌面端，连续放大易导致行高失衡。这时需要在常见设备宽度处手动微调：
- 在
375px（主流手机）、768px（平板竖屏）、1024px（小桌面）设明确字号 - 示例：
h1 { font-size: 4.2vw; }<br>@media (max-width: 375px) { h1 { font-size: 16px; } }<br>@media (min-width: 768px) and (max-width: 1023px) { h1 { font-size: 24px; } }<br>@media (min-width: 1024px) { h1 { font-size: 28px; } }
避免嵌套容器干扰 vw 计算
vw 基于视口宽度，但如果文字在缩放容器（如 transform: scale()）、iframe 或设置了 width 的 flex/Grid 子项中，实际渲染可能偏离预期。排查重点：
立即学习“前端免费学习笔记（深入）”；
- 检查父级是否用了
transform、zoom或scale()—— 这些会改变元素渲染尺寸，但不改变视口宽度，导致vw计算基准错位 - 确保文本容器没有意外设置
font-size（尤其是em或%），否则会叠加缩放 - 用浏览器开发者工具的“Computed”面板，确认最终生效的
font-size值是否符合预期
搭配 line-height 和 max-width 提升可读性
光调字体大小不够。小屏字小了，行高若不变，文字会挤；大屏字大了，单行过长影响阅读。需同步控制：
- 行高也用相对单位：
line-height: 1.4;（无单位，继承父级字号）或line-height: clamp(1.3, 0.03vw + 1.2, 1.6); - 正文区域加
max-width: 65ch;（按字符数限制宽度），比固定像素更适配不同字号 - 标题类元素可配合
text-wrap: balance;（新版支持）让多行标题更均匀