@media响应式查询异常：开发者工具正常，手动调浏览器窗口无效

问题根源 #

你当前用的min-device-width/max-device-width是基于设备物理屏幕宽度的属性——比如你的电脑屏幕是1920px，这个值就固定不变。手动拖动浏览器窗口时，设备本身的宽度没变化，所以媒体查询不会触发；而开发者工具的响应式模式是模拟不同设备的物理宽度，因此能正常生效。

解决方案 #

把媒体查询里的device-width替换成width（这个属性对应浏览器视口的宽度，窗口大小变化时会实时更新）。修改后的代码如下：

@media only screen and (min-width: 320px) and (max-width: 767px) {
  /* 移动端样式 */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* 平板样式 */
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  /* 小屏桌面样式 */
}
@media only screen and (min-width: 1200px) {
  /* 大屏桌面样式 */
}

额外提示 #

如果需要适配移动端设备，务必在HTML的<head>标签里添加视口元标签，确保移动端浏览器能正确识别视口宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

对应现象说明 #

• 开发者工具响应式调试模式：修改模拟设备尺寸时，样式正常切换（对应你提供的第一张截图）
• 手动调整浏览器窗口：无论窗口拉多小，始终应用大屏样式（对应你提供的第二张截图）

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