我被一个CSS bug坑了2小时，最后发现是屏幕分辨率的问题

上周做一个响应式页面，本地测试没问题，上线后用户反馈布局错乱。复现了半天，最后发现是屏幕分辨率的问题。

现象

用户截图过来，一个按钮跑到屏幕外面了，文字也叠在一起。但我本地看是正常的。 排查步骤：

1. 怀疑是浏览器兼容性问题，测了Chrome、Firefox、Edge，都没问题。
2. 怀疑是用户缩放页面，让用户按Ctrl+0恢复，还是错乱。
3. 怀疑是缓存，让用户清缓存，无效。
4. 让用户发屏幕分辨率，1920x1080，和我本地一样。

转折点

让用户开远程桌面，我直接看。发现他的1080p屏幕，Windows缩放设置是125%。 而我本地测试时，缩放是100%。

原因

CSS用了 px 单位，配合 media query 判断屏幕宽度：

@media (max-width: 1200px) { .sidebar { display: none; } }

用户缩放125%后，浏览器认为逻辑分辨率是1536px（1920/1.25），触发了 max-width: 1200px 的媒体查询，侧边栏被隐藏，布局就乱了。

解决方案

把 px 改成 rem 或 em ，媒体查询用 rem ：

  font-size: 16px;
}

@media (max-width: 75rem) { /* 1200px / 16px */
  .sidebar {
    display: none;
  }
}

或者更直接，用 px 但考虑缩放因子，或者用 min-resolution 媒体查询判断。

另一个坑

改完后，发现字体也变了。因为用户缩放后， 1rem 对应的实际像素变了，字体大小跟着变。

最后统一用 px 定死字体大小，布局用 rem ，勉强解决。

总结

响应式页面测试时，一定要测不同缩放比例：

100%

125%（Windows默认推荐）

150%

本地开发时把缩放调到125%，能提前发现很多问题。

这个bug花了2小时，最后改代码5分钟。主要是方向错了，一直在查JS逻辑，没想到是CSS单位问题。