最推荐使用 clamp() 实现响应式字体：h1 { font-size: clamp(1.25rem, 4vw, 2.5rem); }，即在1.25rem至2.5rem间按4vw动态缩放，兼顾小屏可读性与大屏限制。
用 vw 单位让字体随屏幕宽度等比缩放
直接用 vw（viewport width）是最简单粗暴的响应式字体方案：1vw = 视口宽度的 1%，所以 font-size: 4vw 表示字体大小为当前屏幕宽度的 4%。
但要注意它不区分设备类型，只认宽度。手机上可能太小，大屏上又太大，实际效果常不如预期。
- 小屏（如 iPhone SE）
375px宽 →4vw≈15px，勉强可读 - 桌面（
1920px）→4vw≈77px，明显过大 - 它不会自动停在某个最大值，必须手动加限制
用 clamp() 控制最小、理想、最大字号
clamp() 是目前最推荐的写法，能同时设定下限、首选值和上限，浏览器原生支持（Chrome 88+、Firefox 79+、Safari 13.1+），不需要媒体查询。
h1 {
font-size: clamp(1.25rem, 4vw, 2.5rem);
}
这行的意思是：font-size 在 1.25rem 到 2.5rem 之间按 4vw 动态计算，但绝不低于 1.25rem，也绝不高于 2.5rem。
立即学习“前端免费学习笔记（深入）”；
-
1.25rem（≈20px）保底，防止小屏过小 -
4vw是弹性中间值，适配中等宽度 -
2.5rem（≈40px）封顶，避免大屏失控 - 数值不是固定比例，需根据实际排版反复微调
搭配 media query 做精细断点控制
当 clamp() 的线性缩放仍不够精准（比如平板横竖屏差异大、或需要适配老浏览器），就得补媒体查询。
@media (max-width: 480px) {
h1 { font-size: 1.5rem; }
}
@media (min-width: 481px) and (max-width: 768px) {
h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
}
@media (min-width: 769px) {
h1 { font-size: 2.25rem; }
}
这种写法更可控，但维护成本高——每个标题层级、每种设备组合都可能要单独调。
- 优先用
clamp()覆盖大部分场景，只在关键断点补@media - 别盲目套用“移动端用 rem、PC 用 px”，统一用
rem或em更利于可访问性（用户缩放时字体仍可变） - 避免在
font-size里混用px和vw，容易导致计算混乱
注意视口设置和缩放行为对 vw 的影响
vw 基于 <meta name="viewport"> 定义的视口宽度。如果没设或设错，vw 会按错误基准计算。
常见坑：
- 漏写
<meta name="viewport" content="width=device-width, initial-scale=1">→ 移动端可能按980px渲染，10vw就变成98px - 设了
maximum-scale=1但没允许用户缩放 → 阅读障碍用户无法放大文字，违反可访问性要求 - Safari iOS 在地址栏收起/展开时会临时改变视口高度，
vh更敏感，vw相对稳定，但仍建议测试真机
