rem 是最稳妥的跨浏览器方案；px 不响应系统缩放导致字变小、UI 挤压；em 易因嵌套失控；应按内容语义决定是否响应缩放，而非仅选单位。
直接用 rem 配合根元素字体缩放，是最稳妥的跨浏览器方案；px 虽然绝对，但无法响应用户系统缩放；em 容易因嵌套层层放大，失控风险高。
为什么 px 在高DPI或系统缩放下会“失效”
Windows 125% 缩放、macOS “更大文本”、iOS 动态字体等场景下，px 是物理像素单位，浏览器不会主动按比例重绘文字——结果就是字变小、UI 挤压、可读性下降。这不是 bug，是 CSS 规范对 px 的明确定义：它本就不该响应系统级缩放。
实操建议：
- 避免在正文、按钮、表单控件中单独使用固定
px（如font-size: 14px） - 若必须用
px（例如图标字体、微调间距），只用于装饰性、非文本内容 - 检查 Chrome DevTools → Rendering → “Emulate CSS media feature prefers-reduced-motion / forced-colors / …” 可模拟系统缩放效果
rem 怎么设才真兼容所有浏览器
rem 依赖 html 元素的 font-size，关键在于：不能写死，得随系统缩放动态调整。现代浏览器（Chrome 80+、Firefox 75+、Safari 14.1+）已原生支持 1rem = 系统基础字号（通常为 16px），但旧版 Safari 和部分安卓 WebView 仍需手动干预。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 初始化根字号用
html { font-size: 100%; }，而非16px，确保继承系统默认 - 对 IE11 或老安卓（WebView ≤ 4.4）加兜底：
html { font-size: 16px; } @supports (font-size: 1rem) { html { font-size: 100%; } } - 避免 JS 动态改
document.documentElement.style.fontSize——干扰用户缩放意图，且在 pinch-zoom 时不同步
em 嵌套时字体突然变大？定位和规避方法
em 是相对于父元素 font-size 的相对单位，三层 div 套用 font-size: 1.2em，最终可能放大到 1.2 × 1.2 × 1.2 ≈ 1.73rem，完全脱离预期。
实操建议：
- 仅在明确需要“随父缩放”的局部场景用
em，例如按钮内图标尺寸跟随文字大小 - 组件内部统一用
rem，对外暴露font-size接口时，文档注明“接受rem或无单位数字（按根字号换算）” - 用 Chrome DevTools 的 Computed 面板逐层查看
font-size实际计算值，比猜更准
真正难的不是单位选哪个，而是判断「这段文字是否应该随系统缩放」：标题可以略克制，正文必须响应，而代码块里的 font-size 往往要锁定——这些决策比技术实现更影响最终体验。
