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 仍需手动干预。
立即学习“前端免费学习笔记（深入）”；
