浏览器跨显示器拖动时device-width媒体查询未触发，如何解决？

这个问题我之前在多显示器环境下踩过同款坑！核心问题出在你用的device-width媒体查询属性上——它对应的是设备本身的物理屏幕宽度，而不是浏览器当前的视口宽度。当你把浏览器从1920x1080显示器拖到1024x768显示器时，设备（你的电脑）本身没变，所以device-width的值不会更新，媒体查询自然不会触发样式切换。

正确的解决方式：使用视口宽度的媒体查询 #

换成基于min-width/max-width的媒体查询就可以完美解决这个问题，因为它会实时监听浏览器窗口的宽度变化（包括跨显示器拖动时的尺寸变更），自动触发样式切换。

给你写个完全符合需求的示例代码：

/* 小视口下（对应1024x768显示器的窗口宽度），.my-box显示红色 */
@media (max-width: 1023px) {
  .my-box {
    background-color: red;
  }
}

/* 大视口下（对应1920x1080显示器的窗口宽度），.my-box显示蓝色 */
@media (min-width: 1024px) {
  .my-box {
    background-color: blue;
  }
}

额外小提示 #

如果你的场景确实需要区分设备类型（比如移动端vs桌面端），可以用min-device-width/max-device-width，但要注意：它同样是基于设备物理屏幕的，跨显示器拖动时还是不会变化。所以针对窗口尺寸动态变化的场景，min-width/max-width才是最可靠的选择。

内容的提问来源于stack exchange，提问作者vulcand4