高分屏下rem变小的根源是viewport未适配dpr，需用JS根据window.devicePixelRatio动态设置html字体大小，避免CSS媒体查询冲突，并设最小字号下限保障可读性。
高分屏下 rem 布局文字/元素突然变小的根源
这不是 rem 写错了，而是 viewport 元标签没适配设备像素比（dpr）。很多项目只写了 ，在 iPhone 14 Pro 或 Windows 高分屏上，浏览器会按物理像素渲染，但 CSS 像素未同步缩放，导致 rem 计算基准（比如 1rem = 16px）被“拉薄”。
关键点在于：rem 的根字体大小（html 的 font-size）必须动态响应 dpr，不能只依赖固定屏幕宽度。
实操建议：
- 用 JavaScript 检测
window.devicePixelRatio，动态设置document.documentElement.style.fontSize - 避免直接用
screen.width / 375 * 16这类公式——它忽略 dpr，高分屏下会误判“可用宽度” - 更稳妥的做法是：先设
viewport为width=device-width, initial-scale=1, maximum-scale=1，再用 JS 根据dpr放大根字号（例如 dpr=2 时，1rem = 32px）
vw/vh 单位在 Safari 和旧版 Chrome 中的兼容陷阱
vw 看起来很美，但 iOS Safari 14.5 之前不支持动态视口变化（比如弹出软键盘），vh 在移动端常被误算为「包含地址栏的整个视口高度」，导致布局塌陷。Android Chrome 80+ 虽支持，但某些折叠屏设备仍返回错误值。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 慎用
100vh做全屏容器；改用min-height: 100vh+height: 100%组合兜底 - 需要精确视口单位时，优先用
100dvh（dynamic viewport height）——Chrome 105+/Safari 16.4+ 支持，它能自动排除地址栏和软键盘占用 - 对老版本兼容，可 fallback 到 JS 获取
window.innerHeight并写入 CSS 变量：:root { --vh: 100vh; }→ JS 更新document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
rem + viewport 混合方案中 font-size 的计算冲突
常见错误是同时用 JS 设置 html 的 font-size 和 CSS 媒体查询强制覆盖，比如：
@media (min-width: 768px) {
html { font-size: 20px; }
}JS 动态设置和 CSS 媒体查询会打架，最终以层叠权重或执行时序为准，结果不可控。
实操建议：
- 放弃纯 CSS 媒体查询控制根字号，统一交给 JS —— 它能实时读取
dpr和innerWidth，比媒体查询更准 - JS 中使用
matchMedia监听横竖屏或宽度变化，而不是靠 CSS 触发后 JS 补救 - 设定一个最小字号下限（如
12px），防止高 dpr 设备把文字缩到看不清（dpr=3 且宽度小的时候，1rem 可能被算成 9px）
高分屏响应式最易被忽略的，是把「视觉一致性」默认等同于「CSS 像素一致」。实际上，用户感知的是物理尺寸与阅读舒适度，而不仅是代码里写的 1rem。所以 root font-size 必须是 dpr × 设计稿基准的函数，不是屏幕宽度的线性映射。
