推荐以 rem 为主、vw 为辅，关键标题用 clamp(1.125rem, 4vw, 1.5rem) 控制字号范围，正文统一用 1rem 配合 :root 动态调整根字号，并为 clamp() 提供 fallback 降级，同时 line-height 用无单位值、letter-spacing 用 em 保证缩放一致性。
font-size 用 rem 还是 vw？选错会导致布局断裂
直接用 px 写死字体大小，在响应式场景下基本等于放弃适配。用 em 容易嵌套放大，维护成本高。真正可控又简洁的是 rem 配合根字号动态调整，或用 vw 做视口比例缩放——但 vw 在小屏上可能缩得太小（比如 2vw 在 320px 屏幕上只有 6.4px），肉眼难读。
推荐组合：以 rem 为主，vw 为辅，在关键标题上用 clamp() 控制上下限。
-
clamp(1.125rem, 4vw, 1.5rem)：最小 1.125rem（18px），最大 1.5rem（24px），中间按视口宽度线性过渡 - 正文统一用
1rem，靠:root的font-size控制全局基准 - 避免对每个断点都写
font-size，优先用clamp()减少媒体查询数量
@media 中该用 min-width 还是 max-width？看设计稿断点逻辑
多数人习惯从移动端开始写（mobile-first），这时应优先用 min-width，配合 rem 基准逐步放大字号。如果设计稿明确分「手机 / 平板 / 桌面」三档，且每档有独立字体规范，才考虑补充 max-width 限定范围。
错误做法：同一选择器里混用 min-width 和 max-width，比如 @media (min-width: 768px) and (max-width: 1023px) —— 容易漏掉边界值，也难调试。
立即学习“前端免费学习笔记（深入）”；
- 手机默认样式（无媒体查询）设为最小字号，例如
html { font-size: 16px; } - 平板起始点用
@media (min-width: 768px)，把html的font-size调到18px - 桌面端用
@media (min-width: 1200px)，设为20px，再加clamp()微调标题
clamp() 兼容性够不够？别忘了 fallback 方案
clamp() 在 Chrome 88+、Firefox 79+、Safari 13.1+ 支持良好，但 iOS Safari 13.0 和旧版 Android WebView 不支持。不加降级会直接回退到第一个值（即最小值），导致大屏字体过小。
必须写 fallback：先写不支持 clamp() 的值，再覆盖一行 clamp()。
h1 {
font-size: 1.25rem;
font-size: clamp(1.125rem, 4vw, 1.5rem);
}
注意顺序不能反，CSS 解析是从上到下，后声明的生效。
- 不要用
@supports (font-size: clamp(...))包裹——它本身在不支持的浏览器里就无效，起不到降级作用 - 若项目需兼容 iOS 12 或更低版本，建议改用 JS 动态设置
document.documentElement.style.fontSize -
clamp()的三个参数单位要一致（全用rem或全用vw），混用如clamp(16px, 4vw, 1.5rem)会导致解析失败，回退到初始值
字体大小突变？检查 line-height 和 letter-spacing 是否同步调整
只改 font-size 而忽略行高，容易造成文字挤在一起或留白过大。尤其在 clamp() 动态缩放时，line-height 若写死 1.5，小屏时行距显得松散，大屏时又可能过紧。
安全做法：行高用无单位数值（如 1.4），让其随字体等比缩放；字间距用 em 单位，与当前字体挂钩。
-
line-height: 1.4;（推荐）——自动继承缩放 -
letter-spacing: 0.02em;（比px更稳） - 避免
line-height: 24px;这类固定像素值，否则和动态字体失步
最常被忽略的是按钮内文字：当按钮高度用 rem 设置，而文字用 px，缩放后会出现文字溢出或垂直偏移。所有文本相关属性，只要父容器尺寸在变，就得确认是否联动。
