该用px时是需像素级精准控制局部尺寸，如图标旁文字；em基于父元素字号，rem基于根元素字号；设rem基准宜用html{font-size:16px}而非62.5%；响应式字体优先用clamp()。
什么时候该用 px？
直接控制局部尺寸、需要像素级精准时用 px。比如图标旁文字、按钮内衬文字、设计稿标注明确为 14px 的小字，都适合写死 font-size: 14px。
- 优点：稳定、可预测，所有现代浏览器渲染一致
- 缺点：无法响应用户系统字号设置（如 Windows「放大文本」或 macOS「显示器缩放」），也不随根字体缩放，对无障碍不友好
- 常见错误：全站滥用
px导致响应式失效，或在组件库中写死导致主题切换困难
em 和 rem 的本质区别在哪？
em 是“看爹”，rem 是“认祖”——这是最直白的区分方式。
-
em基于父元素的font-size计算，嵌套三层后容易失控（比如父 16px → 子 1.2em = 19.2px → 孙 1.2em ≈ 23px，但你本意只是想统一放大 20%） -
rem只认html元素的font-size，无论嵌套多深，1.5rem永远等于html字号的 1.5 倍 - 兼容性已不是问题：IE9+、所有现代浏览器均原生支持
rem；em虽更老，但行为在不同层级下易被误读
怎么设好 rem 的基准值？别用 62.5% 了
老教程常写 html { font-size: 62.5%; }（让 1rem = 10px），但这个做法现在有隐患：
- Chrome 最小字体限制是 12px，若用户系统设了「最小字号 14px」，
62.5%在某些场景下会被强制截断，导致计算失准 - 更稳妥的做法是显式设
html { font-size: 16px; }（保持浏览器默认），然后用1.25rem表示 20px，语义清晰且无兼容风险 - 如需动态适配，可用 JS 或媒体查询调整
html的font-size，例如：html { font-size: clamp(14px, 2.5vw, 18px); }
响应式字体别只靠 vw，优先用 clamp()
font-size: 4vw 看似简单，但在超小屏（320px）会缩到 12.8px，超大屏（3840px）则飙到 153.6px——完全不可控。
立即学习“前端免费学习笔记（深入）”；
-
clamp(min, preferred, max)是目前最实用的方案，例如：.title { font-size: clamp(1.25rem, 4vw, 2.5rem); }意思是：最小不小于 20px（1.25rem），理想状态按视口宽度缩放，最大不超过 40px（2.5rem） - 它兼容 Chrome 88+、Firefox 79+、Safari 13.1+，2026 年已可放心使用
- 注意：不要在
body或全局通配符上滥用clamp()，会导致段落、列表等小字也剧烈跳变，影响可读性
px 控制原子组件（如 .btn__label）、rem 管理布局层级（如标题、卡片文字）、clamp() 修饰关键视觉区块（如 Banner 主标题）——单位本身没有高下，但混用时没想清“谁在决定这个尺寸”，就很容易掉进继承链断裂或缩放失焦的坑里。 
