Media Query异常表现：CSS媒体查询背景色生效逻辑不符合预期

问题核心原因 #

not 关键字在媒体查询中仅作用于它所在的、逗号分隔的单个查询项，逗号本身是「或」逻辑分隔符，拆分后的多个查询项相互独立，not 不会覆盖逗号后的其他查询规则。

你编写的媒体查询规则：

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

@media not screen and (max-width: 600px) , (min-width: 500px) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

<h1>The @media Rule</h1>

<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "yellow".</p>

</body>
</html>

其中媒体查询部分等价于两个独立的触发条件，只要任意一个满足，蓝色背景规则就会生效：

• 条件1：not (screen and (max-width: 600px)) → 非屏幕设备，或是屏幕设备且视口宽度大于600px
• 条件2：(min-width: 500px) → 视口宽度≥500px

现象匹配逻辑 #

只有当两个条件同时不满足时，才会保留默认的黄色背景，触发场景需要同时满足：

1. 条件2不成立：视口宽度<500px
2. 条件1不成立：screen and (max-width: 600px) 成立 → 是屏幕设备且视口宽度≤600px

二者的唯一交集就是屏幕设备下视口宽度<500px的区间，和你实际观测到的现象完全一致。

预期逻辑修正 #

如果你希望 not 作用于所有条件组合（也就是对 screen and (max-width: 600px) 或 (min-width: 500px) 整体取反），需要把所有待取反的条件包裹在同一个括号内：

/* 对整个条件组合取反，由于原组合覆盖所有宽度区间，该规则永远不会触发，背景始终为黄色 */
@media not (screen and (max-width: 600px), (min-width: 500px)) {
  body {
    background-color: lightblue;
  }
}

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