应使用 clamp(14px, 4vw, 18px) 实现字体响应式缩放，兼顾小屏最小可读性与大屏上限；优先用 rem 配合动态根字号保障可访问性缩放，避免纯 vw 忽略系统设置。
小屏幕文字溢出或撑破布局的典型表现
页面在手机上打开时，font-size: 16px 看起来像标题一样大，按钮文字挤不下，甚至横向滚动条出现——这不是字体设错了，而是 CSS 没做响应式缩放。浏览器默认会将小于 12px 的字号强制放大（尤其 iOS Safari），但反过来，固定像素值在小屏上反而显得过大。
用 vw 单位实现等比缩放，但要注意基准和上限
vw 是视口宽度的 1%，font-size: 4vw 表示字体始终占屏幕宽的 4%。它简单直接，但容易在超小屏（比如 iPhone SE）下缩得太小，或在大平板上又太大。
- 推荐写法：
font-size: clamp(14px, 4vw, 18px)—— 强制最小 14px、最大 18px，中间按 4vw 流动 - 避免单独用
font-size: 3.5vw：375px 屏宽下是 13.125px，可能被系统强制抬到 16px；而 414px 下变成 14.49px，视觉不连贯 -
vw基于document.documentElement.clientWidth，不随 zoom 变化，适合纯尺寸适配，但对可访问性缩放不友好
用 rem 配合根字体动态调整，更适合兼顾可访问性
rem 依赖 html 根元素的 font-size，只要控制好根字号，所有 rem 字体就联动变化。关键不在“用 rem”，而在“怎么设根字号”。
- 别写死
html { font-size: 16px }：这会让 rem 失去响应意义 - 推荐 JS 动态设置：
document.documentElement.style.fontSize = Math.min(16, window.innerWidth / 20) + 'px'（即每 20px 屏宽对应 1px 根字号，上限 16px） - 或者纯 CSS 方案：
html { font-size: clamp(14px, 2.5vw, 16px); }，再让其他文字用font-size: 1rem、1.2rem等 - 注意：若用户在系统里设置了“更大字体”或浏览器缩放为 125%，
rem仍会尊重该缩放比例，vw则不会
混合用法与必须避开的坑
实际项目中，标题可用 clamp() + vw 强控制，正文用 rem 保可访问性。但以下错误高频出现：
立即学习“前端免费学习笔记（深入）”；
- 同时给
html设了font-size又用 JS 覆盖，导致闪动或计算错乱 - 媒体查询里只改某几个元素的
font-size，没统一 root 或没覆盖所有断点，造成文字大小跳跃 - 用了
vw却忘了text-size-adjust: 100%，iOS Safari 仍可能干预小字号渲染 - 在 Flex 或 Grid 容器中嵌套多层
rem文字，误以为会叠加缩放——不会，rem始终相对于根，跟父级无关
真正难的不是选 rem 还是 vw，而是决定哪些文字必须随视口线性缩放，哪些必须守住最小可读阈值，以及是否愿意为系统字体缩放妥协部分视觉一致性。
