开发者工具响应式模式与拖拽窗口调视口的差异及媒体查询失效问题

核心原因：缺少<meta name="viewport">标签导致的视口逻辑差异 #

你遇到的问题本质是桌面窗口视口与响应式设备模拟视口的计算规则不同，根源在于页面未添加关键的视口元标签：

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

两种调整方式的具体区别 #

• 拖拽开发者工具调整桌面窗口：此时浏览器的布局视口直接等于浏览器窗口宽度，em单位基于浏览器默认字体大小（通常为16px），30em换算后是480px。当窗口宽度小于480px时，媒体查询(min-width: 30em)不触发，背景显示粉色。
• 响应式设计模式（设备工具栏）：如果没有视口元标签，浏览器会模拟移动设备的默认布局视口（通常为980px左右）——无论你怎么调整设备模拟的可视化宽度，布局视口的实际计算宽度都远大于480px，因此媒体查询始终处于触发状态，背景保持蓝色。

你之前用HTML标签做响应式时有效，应该是当时页面包含了这个视口元标签，它会让浏览器的布局视口与设备逻辑像素宽度对齐，此时调整响应式模式的设备宽度就能正确触发媒体查询。

解决方案 #

在HTML的<head>中添加视口元标签即可修复：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      background-color: pink;
    }

    @media (min-width: 30em) {
      body {
        background-color: blue;
      }
    }
  </style>
</head>
<body>
</body>
</html>

添加后再打开响应式设计模式，将设备宽度调整到小于480px（30em）时，背景就会变为粉色，和桌面窗口调整的效果一致。

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