媒体查询奇怪的行为答案

【问题标题】：Media Query Strange Behaviour媒体查询奇怪的行为
【发布时间】：2021-09-16 07:01:54
【问题描述】：

我一直在修改 W3 编辑器以查看媒体查询。我试图理解为什么背景总是蓝色的，除了宽度下限。据我了解，至少有一个特征总是正确的，因此，在反转后，它应该总是黄色的。然而，情况并非如此，仅当视口

有人知道这是为什么吗？

`<!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>
`

【问题讨论】：

标签： html css media-queries

【解决方案1】：

行为似乎是正确的。

“非屏幕”仅指它所属的第一个条件，它不影响第二个条件（最小宽度），因此忽略最大宽度，因为我们在屏幕上，而最小宽度遵守宽度。

因此，每当视口宽度大于或等于 500 像素时，背景都是蓝色的。每当它小于它时，它就会停留在上面设置的原始颜色，黄色。

如果您希望在屏幕上忽略媒体查询中的两个条件，那么您也需要将非屏幕作为第二个条件的一部分。因为在一系列条件中，它们是相互独立的。

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

【讨论】：

感谢您澄清这一点，我认为“不”适用于两者