字体层级应按阅读场景分三档手动设断点，每档仅调 font-size 和 line-height；clamp() 会破坏离散字号节奏且兼容性差；断点须依内容挤叠临界点设定，媒体查询需统一置于末尾、选择器一致、避免混用工具类与自定义断点。
直接结论：字体层级不是靠“自动缩放”维持，而是按内容阅读场景分三档手动设断点，每档只改 font-size 和必要联动项（如 line-height），其他样式不掺和。
为什么不能用 clamp() 统一控制整站字体层级
clamp() 看似省事，但实际会破坏设计师给的离散字号节奏。比如正文从 14px → 16px → 18px 是明确的阅读阶梯，而 clamp(0.875rem, 2.5vw, 1.125rem) 在 400px–800px 之间把字号拉成斜线，中间段用户根本感知不到“升级”，反而更难建立视觉预期。旧版 Safari 对 clamp() 的 min 和 max 支持不稳定，部分机型直接 fallback 到中间值，导致小屏字太小、大屏字太大。
怎么设断点才不翻车：按内容挤叠点，不是设备分辨率
别抄“iPhone 12 是 390px”这种数字。真正该看的是文字开始折行、按钮文字被截断、行高撑不开的临界点：
-
@media (min-width: 480px)：防小屏段落折成三行、按钮内文字换行挤压图标 -
@media (min-width: 768px)：平板竖屏最小可用宽度，此时可把h2从 1.25rem 涨到 1.5rem，提升扫读效率 -
@media (min-width: 1024px)：桌面起始，p从 1rem → 1.125rem，但h1不宜超过 2.5rem（2K 屏上会糊）
怎么写 CSS 才不被覆盖、不漏生效
媒体查询本身不加权，失效基本是顺序或选择器不一致导致：
立即学习“前端免费学习笔记（深入）”；
- 把所有
@media块统一放在 CSS 文件末尾，哪怕它跨多个组件文件也要最后合并 - 保持选择器完全一致：写成
.title { font-size: 1.25rem; } @media (min-width: 768px) { .title { font-size: 1.5rem; } }，别拆成两处声明 - 断点里只改
font-size和line-height——color、margin、font-weight这些别重复写，否则容易漏维护或冲突 - 检查方向：想在平板生效，必须用
min-width；用了max-width: 767px就只作用于手机，平板和桌面全不生效
Tailwind/Bootstrap 用户特别注意的陷阱
它们的字体工具类是 media query 封装，但行为不等于手写 CSS：
- Tailwind 的
text-base md:text-xl lg:text-2xl是从左到右层叠，必须严格按断点从小到大写，lg:text-2xl md:text-xl会失效 - Bootstrap 的
fs-4类支持fs-md-4，但fw-bold没有fw-md-bold——你写了也没用，CSS 里压根没这个规则 - 如果混用工具类和自定义 media query，务必确认工具类生成的断点值和你手写的是否一致（比如 Tailwind 默认
md是 768px，但项目里可能被重定义为 769px）
最易被忽略的一点：字体层级不是独立存在的，它必须和行高、字重、字间距配合。比如 font-size 在 768px 断点涨了 20%，line-height 至少得同步涨 10%～15%，否则文字会挤在一起。这个联动关系没法靠工具类自动推导，只能人工对齐。
