最稳妥的响应式字体方案是 clamp()，如 font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem)，设定了最小值、首选值和最大值，兼顾小屏可读性与大屏显示效果。
用 vw 单位直接响应视口宽度
字体大小随屏幕改变最直接的方式，就是用 vw（viewport width）单位。1vw 等于视口宽度的 1%，所以 font-size: 5vw 表示字体始终是屏幕宽的 5%。
但要注意：小屏上可能太小、大屏上可能过大，纯 vw 缺乏下限和上限控制。
- 适合标题类元素，比如
h1，对可读性容忍度稍高 - 避免在正文段落中直接用
font-size: 2vw—— 手机上可能只剩 6px，肉眼难辨 -
vw基于整个视口宽度，不区分设备像素比，高清屏上不会自动放大
搭配 clamp() 设定安全范围
clamp() 是目前最稳妥的响应式字体方案，它能定义最小值、首选值、最大值三个参数，浏览器自动插值计算。
例如：font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem) 表示：最小不小于 1rem，最大不超过 2.5rem，中间按视口宽度线性过渡。
立即学习“前端免费学习笔记（深入）”；
- 第一个值是下限（固定），防止小屏过小；第三个是上限，防大屏失控
- 中间表达式建议含
vw+ 固定单位，比纯vw更平滑（比如4vw + 0.8rem） - 旧版 Safari（clamp()，如需兼容，得加
font-size回退声明
慎用 rem 配合 JS 动态改根字体
有人会监听 resize，用 JS 改 document.documentElement.style.fontSize，再让所有 rem 跟着变。这方法可行，但容易出问题。
- 页面刚加载时 JS 还没执行，首屏字体可能错乱（尤其 SSR 或静态页）
- 频繁 resize 触发重排，移动端卡顿明显，尤其低端安卓机
- 横竖屏切换时，视口宽高突变，JS 计算逻辑若没兜底，
rem可能跳变或归零 - 现代 CSS 已有更轻量方案（
clamp/vw），除非要精确匹配设计稿缩放规则，否则没必要 JS 干预
别忽略系统字号设置和可访问性
用户如果在系统里调大了「默认字体大小」或开启了「粗体文本」，纯 vw 或硬编码 px 会无视这些偏好，导致文字不可读。
- 用
rem或em为基础单位，才能继承根元素缩放效果 -
clamp()的三个参数中，至少下限和上限建议用rem，中间项可用vw混合 - 测试时手动在系统设置里调大字体（iOS「显示与亮度→文字大小」、Android「设置→无障碍→字体大小」），看是否仍清晰可读
真正麻烦的不是怎么写那行 font-size，而是想清楚：这个字体在 320px 宽的 iPhone SE 上最小不能低于多少，在 2560px 宽的 4K 屏上最大不能超过多少，以及用户开了辅助功能时是否还成立。
