css font size 单位怎么选_px em rem 使用建议_网络技术

发布时间 - 2026-01-07 00:00:00 点击率：次

该用px时是需像素级精准控制局部尺寸，如图标旁文字；em基于父元素字号，rem基于根元素字号；设rem基准宜用html{font-size:16px}而非62.5%；响应式字体优先用clamp()。

直接控制局部尺寸、需要像素级精准时用 px。比如图标旁文字、按钮内衬文字、设计稿标注明确为 14px 的小字，都适合写死 font-size: 14px。

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 虽更老，但行为在不同层级下易被误读

老教程常写 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); }
```

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 主标题）——单位本身没有高下，但混用时没想清“谁在决定这个尺寸”，就很容易掉进继承链断裂或缩放失焦的坑里。