px不推荐用于响应式字体，因其固定、不可缩放、无法响应视口变化；应选用rem（根元素基准）、vw（视口基准）等相对单位，并结合clamp()或媒体查询保障可访问性与稳定性。
为什么 px 在响应式字体中不推荐用
固定像素值 px 会让文字在小屏上挤成一团、大屏上又显得单薄，且无法被用户系统字号缩放设置影响，可访问性差。浏览器对 px 的渲染是绝对的，它不感知视口或父容器变化，自然也就没法“自适应”。
真正能响应屏幕的是相对单位：它们的计算基准会随环境动态变化。关键不是“换单位”，而是选对**基准源**——是根元素？是视口？还是父容器？
rem 依赖 :root 字号，适合全局比例控制
rem 基于根元素（html）的 font-size 计算，只要改一次 :root 的值，所有 rem 字体就同步缩放。适合需要统一缩放节奏的场景，比如整站按 100% → 125% → 150% 切换。
- 常见做法是用 JS 动态设置
:root字号，例如按屏幕宽度等比缩放：document.documentElement.style.fontSize = Math.min(window.innerWidth / 375 * 16, 24) + 'px';
- 也可纯 CSS 实现断点控制：
:root { font-size: 16px; } @media (min-width: 768px) { :root { font-size: 18px; } } @media (min-width: 1200px) { :root { font-size: 20px; } } - 注意：若项目已用第三方库（如 Ant Design），它们可能自带
rem适配逻辑，重复设置会导致冲突
vw 单位直接绑定视口宽度，但需防极端缩放
1vw = 视口宽度的 1%，所以 font-size: 4vw 表示字体始终占屏幕宽的 4%。它响应最及时，无需 JS、无断点，但容易在超小屏（如手机竖屏 320px）下文字过小、超大屏（4K）下文字爆炸。
立即学习“前端免费学习笔记（深入）”；
- 安全写法是加限制：
h1 { font-size: clamp(1.25rem, 4vw, 2.5rem); }——clamp()三参数分别是最小值、首选值、最大值 -
vw不受用户系统字号设置影响，对视力障碍用户不友好；若需兼顾可访问性，建议搭配media query检测prefers-reduced-motion或forced-colors，但不能替代rem - 部分旧版 Safari 对
vw在横竖屏切换时有重绘延迟，需监听orientationchange强制刷新
em 和 % 容易嵌套失控，慎用于响应式字体
em 是相对于**父元素**字体大小的单位，% 同理。一旦嵌套层级变深（比如 section > article > p > span），字体大小会指数级放大或缩小，调试极其困难。
除非明确需要局部缩放（如按钮内图标文字随按钮尺寸微调），否则避免用 em 控制响应式主字体。更稳妥的做法是：用 rem 定义基础字号，再用 em 做组件内微调（如 button { padding: 0.75em 1em; }）。
真正难处理的不是单位本身，而是设计系统里字号阶梯（xs/sm/base/lg）如何与响应逻辑解耦——多数团队卡在这里，不是不会写 vw，而是改一个 h2 大小后，所有卡片、列表、弹窗里的 h2 都得手动校验是否溢出。
