优先用rem而非em，因rem始终相对于根元素字号，避免嵌套累乘；px适合像素级精准控制但缩放不友好；em相对父级易失控；需根据是否需用户缩放响应及嵌套深度选择单位。
直接改 font-size 就行，但选 px 还是 em 得看场景——不是哪个“更好”，而是哪个更稳、更可控。
用 px 调文字大小：简单直接，但缩放不友好
px 是绝对单位，16px 就是 16 像素，浏览器不会根据上下文自动换算。适合需要像素级精准控制的场景，比如 UI 组件库里的按钮文字、图标旁的标签。
- 写法：
font-size: 14px; - 优点：所见即所得，调试方便，兼容性 100%
- 缺点：用户在浏览器里放大文字（比如按 Ctrl + “+”）时，
px文字可能不随系统缩放比例变化（尤其旧版 IE 或某些移动端 WebView） - 注意：
px不继承父元素字号，子元素写16px就是 16px，不管父级是 12px 还是 24px
用 em 调文字大小：相对父级，适合响应式但容易套娃
em 是相对单位，值为“当前元素父元素 font-size 的倍数”。比如父级是 16px，子元素写 font-size: 1.25em;，实际就是 20px。
- 写法：
font-size: 1.2em; - 优点：配合根元素缩放（如用户调大系统字体），文字能等比变大；适合做响应式排版
- 缺点：“嵌套深了就失控”——如果祖父设
16px，父设1.5em（→24px），子再写1.5em，结果是36px，不是你想的“相对于根的 1.5 倍” - 常见坑：
em会继承并累乘，调试时建议用浏览器开发者工具看“Computed”里的真实像素值，别只信代码写的数字
想兼顾灵活与可控？优先用 rem，而不是 em
rem（root em）始终相对于根元素（）的 font-size，不随嵌套变化。这是目前最主流的响应式字号方案。
立即学习“前端免费学习笔记（深入）”；
- 基础设置：
，之后所有rem都按这个基准算 - 响应式技巧：用媒体查询动态改根字号，比如
@media (max-width: 768px) { html { font-size: 14px; } }，整个页面文字就等比缩小 - 注意：
rem在 IE9+ 支持良好，但 IE8 及以下不支持，需 fallback（如先写px，再覆盖rem）
新手最容易忽略的一点：font-size 的默认继承行为
HTML 中几乎所有文本元素（ 真正难的不是记住 、、）默认继承父级 font-size，但有例外：
~ 有浏览器内置样式（Chrome 中 h1 默认约 2em），不写 CSS 也会变大 默认是 0.83em， 已废弃，别用margin 和 padding，也检查是否要统一 font-size，否则不同浏览器渲染差异明显px 和 em 的定义，而是判断“这段文字要不要随用户缩放变大”“它会不会被三层父容器影响”，这些得靠实际调试和看 computed 值来确认。
