我一直在摆弄W3编辑器查看媒体查询。我试图理解为什么背景总是蓝色的，除了在较低的宽度界限。根据我的理解，至少有一个特征总是正确的，因此，在被反转后，它应该总是黄色的。然而，情况并非如此，只有当视口为<500 .
有谁知道这是为什么吗?`<!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>
`
行为似乎是正确的。
'not screen'只指它属于第一个条件的一部分，它不影响第二个条件(min-width)，所以max-width被忽略，因为我们在屏幕上，并且min-width被遵守。
因此，当视口宽度超过或等于500px时，背景为蓝色。
如果您希望在屏幕上忽略媒体查询中的两个条件，那么您也需要将not屏幕作为第二个条件的一部分。因为在一列条件中，它们是相互独立的。
@media not screen and (max-width: 600px) , not screen (min-width: 500px) {
body {
background-color: lightblue;
}
}