应使用 clamp() 控制字号边界：font-size: clamp(16px, 3.8vw, 22px)，避免纯 vw 导致小屏过小、大屏过大；配合无单位 line-height 和微调 letter-spacing 实现整体可读性优化。
vw单位设字号时，文字在小屏上缩得太小怎么办
直接用 font-size: 4vw 看似简单，但实际会出问题：当视口宽度降到 320px，4vw 就只剩 12.8px，远低于可读下限；而大屏下又可能撑到 30px+，破坏行高节奏。根本原因是 vw 是纯线性映射，没考虑阅读舒适区。
解决思路是加边界控制：
- 用
min()和max()包裹（需注意浏览器支持，Chrome 95+、Firefox 97+）：font-size: clamp(16px, 4vw, 24px) - 不支持
clamp()时，退回到媒体查询组合：@media (max-width: 320px) { font-size: 16px; }+@media (min-width: 1200px) { font-size: 24px; } - 避免把根字体设成
vw后再用rem套娃，容易失控；直接作用于目标元素更可控
clamp() 的三个参数到底怎么配才合理
clamp(min, preferred, max) 不是随便填数字，每个值都有明确角色：min 是绝对底线（通常 14–16px），preferred 是“理想值”（建议用 vw 或 vh，比如 3.5vw），max 是上限（一般不超过 28px，否则在 4K 屏上易割裂布局）。
常见误配：
立即学习“前端免费学习笔记（深入）”；
- 把
preferred写成固定值（如clamp(16px, 20px, 24px)）——失去响应意义 - min 和 max 差距太小（如
clamp(18px, 2vw, 19px)）——几乎不起作用 - 用
vh当 preferred（如clamp(16px, 4vh, 24px)）——滚动时字号跳变，干扰阅读
实测较稳的起手式：font-size: clamp(16px, 3.8vw, 22px)，覆盖主流手机到 27 寸屏。
用 rem + JS 动态改根字体，比纯 CSS 更灵活吗
能做，但多数场景没必要。JS 方案（如监听 resize 改 document.documentElement.style.fontSize）确实可加入逻辑判断（比如根据设备像素比调高字号），但代价明显：
- 触发重排（reflow），尤其频繁 resize 时卡顿可见
- 首屏渲染依赖 JS 执行，无 JS 时 fallback 容易失效
- 和服务端渲染（SSR）或静态站点生成器（如 Hugo、Jekyll）配合麻烦，需额外处理 hydration
除非你有强定制需求（比如按用户视力设置档位、或配合深色模式动态微调），否则优先用 clamp()。它原生、零 JS、可被浏览器优化。
字体大小响应了，行高和字重要不要一起动
要，但别自动联动。字号变，行高不调会导致小屏文字挤在一起、大屏行距虚浮；字重不变则小字号下细节糊、大字号下过重。
- 行高建议用无单位值（如
line-height: 1.4），它随字号等比缩放，比写px或em更稳妥 - 字重不推荐响应式切换（比如小屏用 500、大屏用 700），人眼对粗细变化敏感，易造成视觉跳跃；保持统一字重更安全
- 真正该响应的是
letter-spacing：小屏可略收紧（letter-spacing: -0.01em），大屏可略放松（letter-spacing: 0.02em），提升可读性
响应式字号不是孤立动作，它牵着行高、字间距、甚至容器 padding 在走——别只盯着 font-size 调。
