应改用 rem 实现语义化字号体系：以 :root 的 font-size 为基准，通过简单倍数（如 1rem=16px）统一控制，避免 px 堆砌导致维护困难，同时注意图标字体、placeholder 等场景需禁用 rem。
为什么 px 堆砌会让字体大小越来越难改
项目里到处是 14px、16px、18px，改个全局字号得满文件搜替换，还容易漏掉某处 font-size: 15px 这种“特例”。根本原因不是写错了，而是没建立可推导的字号关系——每个值都是孤立的数字，没有锚点。
-
浏览器默认根字号是
16px，但没显式声明时，用户缩放或系统设置可能让它变成15.2px或18px，px值就失去一致性 -
em依赖父级，嵌套深了容易失控（比如三级菜单里font-size: 0.875em算下来到底是多少？） - 真正需要的是“语义化尺寸”：标题该大就大，正文该稳就稳，按钮该清晰就清晰，而不是记一堆像素数
用 rem 搭配基础字号比例快速落地
只改一处 :root 的 font-size，所有 rem 值自动响应。关键是选好基准比例，别搞复杂分数。
:root {
font-size: 16px; /* 所有 rem 的 1 倍基准 */
}
<p>h1 { font-size: 2rem; } /<em> = 32px </em>/
h2 { font-size: 1.5rem; } /<em> = 24px </em>/
p { font-size: 1rem; } /<em> = 16px </em>/
small { font-size: 0.875rem; } /<em> = 14px </em>/
button { font-size: 1.125rem; } /<em> = 18px </em>/- 比例建议用常见倍数：
0.75（12px）、0.875（14px）、1（16px）、1.125（18px）、1.25（20px）、1.5（24px）、2（32px） - 避免
1.333rem这类难读的值——它既不好记，也不好反推 - 如果要适配高 DPI 屏幕，可配合媒体查询微调根字号：
@media (-webkit-min-device-pixel-ratio: 2) { :root { font-size: 18px; } }
哪些地方必须禁用 rem 改用 em 或 px
不是所有字体都适合塞进 rem 体系。强行统一反而增加维护成本。
- 图标字体（如 Font Awesome）：用
px或em更稳妥，因为图标尺寸常需和线条粗细严格对齐，rem可能导致模糊 - 输入框内提示文字（
::placeholder）：部分浏览器对rem渲染不一致，直接写14px更保险 - 超小辅助文案（如表单错误提示）：若设计稿明确要求
12px，且不随用户缩放变化，用px反而更可控
上线前检查字体是否真被体系覆盖
光写对 CSS 不够，得确认实际渲染没被其他规则覆盖。打开 DevTools，逐个点开文字元素，看 Computed 面板里的 font-size 值是否来自你定义的 rem 规则。
立即学习“前端免费学习笔记（深入）”；
- 警惕
!important：老代码里可能残留font-size: 14px !important，会直接干掉你的rem设置 - 注意组件库干扰：比如 Ant Design 默认用
px，若没覆盖其Typography相关变量，标题仍会跳出体系 - 移动端 viewport 缩放会影响
rem实际像素大小，但这是预期行为——用户放大页面时，文字也该等比变大，这正是rem的价值所在
最麻烦的从来不是定几套字号，而是让所有已有样式承认这套规则。动手改之前，先跑一遍 grep -r "font-size.*px" src/ | grep -v "node_modules"，把硬编码的像素值列出来，一个个收编。
