最稳妥的文字大小设置方式是用 rem 单位，需配合根元素 font-size 和 viewport meta 标签；px 适合像素级微调但不适用于正文；em 和 % 易因嵌套失控，应慎用。
直接用 style 改文字大小，最常用也最稳妥的方式是设置 font-size，但值的单位选错会导致响应异常、缩放失效或在不同设备上表现不一致。
用 px 设置固定像素大小——适合局部微调，但不推荐用于正文
px 是绝对单位，写死多少像素就显示多少像素，浏览器缩放时可能不随系统缩放比例变化（尤其在 Windows 高 DPI 屏幕下）。
- 适用场景：图标旁标签、按钮内文字、需要像素级对齐的 UI 元素
- 常见错误：
正文
- 正确示例：
×（关闭按钮里的叉号）
用 rem 基于根字体缩放——现代网页首选方案
rem 相对于 根元素的 font-size 计算，改一处就能批量调整全站文字大小，也兼容系统字体缩放和无障碍设置。
- 必须先设根字号：
（默认值，可省略），或动态设为10px方便计算（如1.4rem = 14px） - 正文推荐写法：
段落文字
- 注意：不要在
style里反复覆盖的font-size，否则rem失效
别乱用 em 和 %——嵌套时容易失控
em 是相对于父元素字体大小的相对单位，% 同理。多层嵌套后数值会指数级放大或缩小，调试困难。
立即学习“前端免费学习笔记（深入）”；
- 典型翻车现场：
0.96em，不是直观的1.2em - 仅建议在组件内部微调（如按钮内图标比文字小一点），避免跨层级使用
-
font-size: 80%等价于0.8em，行为完全一致，别以为换写法就更安全
移动端适配要加 viewport meta，否则 rem 白设
很多新手写了 rem 却发现手机上文字巨小，根本原因是没声明视口，浏览器按桌面宽度渲染，把整个页面“缩”进屏幕里了。
- 必须加这行：
- 漏掉它，
1rem在 iPhone 上可能对应 32px 而不是预期的 16px - 如果项目已上线但没加，用户双指放大后文字才突然变大——这就是 viewport 缺失的典型症状
真正麻烦的不是怎么写 font-size，而是单位选择背后涉及的可访问性、设备适配和维护成本。一个 rem 写错位置，可能让整页文字在读屏软件里无法跟随系统字号调节。
