CSS 媒体查询：最大宽度或最大高度

使用逗号指定两个（或多个）不同的规则：

@media screen and (max-width: 995px), 
       screen and (max-height: 700px) {
  ...
}

来自https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为真，则整个媒体语句都返回真。换句话说，列表的行为类似于逻辑或运算符。

---

CSS 媒体查询和逻辑运算符：简要概述 ;)

快速回答。

用逗号分隔规则：@media handheld, (min-width: 650px), (orientation: landscape) { ... }

长答案。

这里有很多，但我试图让它信息密集，而不仅仅是蓬松的文字。这是一个学习自己的好机会！花点时间系统地阅读，我希望它会有所帮助。

媒体查询

媒体查询主要用于网页设计，以创建特定于设备或情境的浏览体验；这是使用页面的 CSS 中的 @media 声明完成的。 这可用于在多种情况下以不同的方式显示网页：无论您是在具有不同纵横比的平板电脑还是电视上，是否您的设备有彩色或黑白屏幕，或者，也许最常见的是，当用户更改浏览器的大小或在具有不同屏幕大小的浏览设备之间切换时（通常来说，这样的设计被称为 { 2})

逻辑运算符

在针对这些情况进行设计时，似乎有 四个逻辑运算符可用于在针对各种设备或 viewport 尺寸时要求更复杂的要求组合。

（注意：如果您不了解媒体规则、媒体查询和特征查询之间的区别，请先浏览此答案的底部部分，以更好地了解与媒体查询语法相关的术语

1. AND（和关键字）

要求在样式规则生效之前必须满足所有指定的条件。

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

除非以下所有评估为真，否则指定的样式规则不会生效：

媒体类型是“屏幕”，并且

视口至少 700 像素宽，并且

屏幕方向当前为横向。

注意：我相信这三个特征查询一起使用，构成了一个媒体查询。

2. OR（逗号分隔的列表）

不是使用 or 关键字，而是使用逗号分隔的列表将多个媒体查询链接在一起以形成更复杂的媒体规则

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

一旦任何一个媒体查询评估为真，指定的样式规则就会生效：

媒体类型为“手持”或视口至少为 650 像素宽或屏幕方向当前为横向。

3. NOT（不是关键字）

not 关键字可用于否定单个媒体查询（而不是完整的媒体规则——这意味着它只否定一组逗号之间的条目，而不是 @media 声明之后的完整媒体规则）。

同样，note not 关键字否定媒体查询，它不能用于否定媒体查询中的单个特征查询。*

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

此处指定的样式将生效，如果

媒体类型和最小分辨率都不能满足它们的要求（分别为“屏幕”和“300dpi”）或视口至少为 800 像素宽。

换句话说，如果媒体类型为“屏幕”且最小分辨率为 300 dpi，则除非视口的最小宽度至少为 800 像素，否则该规则不会生效。

（not 关键字可能有点时髦。如果我能做得更好，请告诉我。；）

4. ONLY（仅关键字）

据我了解，唯一的关键字用于防止旧浏览器将较新的媒体查询误解为较早使用的较窄媒体类型。如果使用得当，旧的/不兼容的浏览器应该完全忽略样式。

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

旧的/不兼容的浏览器会完全忽略这行代码，我相信它会读取 only 关键字并将其视为不正确的媒体 type。 （有关聪明人的更多信息，请参阅 here 和 here）

了解更多信息

有关详细信息（包括更多可查询的功能），请参阅：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

了解媒体查询术语

注意：我需要学习以下术语才能理解这里的所有内容，特别是关于 not 关键字。这是我理解的：

媒体规则（MDN 似乎也称这些媒体声明）包括术语 @media 及其所有随后的媒体查询

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

媒体查询是一组特征查询。它们可以像一个特征查询一样简单，也可以使用 and 关键字来形成更复杂的查询。媒体查询可以用逗号分隔以形成更复杂的媒体规则（参见上面的 or 关键字）。

screen（注意：此处仅使用一个功能查询。）

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

不是handheld, (min-width: 650px)。 （注意逗号：这里有两个媒体查询。）

特征查询是媒体规则最基本的部分，仅涉及给定特征及其在给定浏览情况下的状态。

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

代码片段和信息来源于：

CSS media queries 由 Mozilla Contributors（根据 CC-BY-SA 2.5 许可）。使用了一些代码示例，并稍作改动以（希望）增加解释的清晰度。

---

在 CSS 中编写正确的媒体查询有两种方法。如果您首先为更大的设备编写媒体查询，那么正确的编写方式是：

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

但是，如果您首先为较小的设备编写媒体查询，那么它将类似于：

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}

---

是的，使用 and，例如：

@media screen and (max-width: 800px), 
       screen and (max-height: 600px) {
  ...
}

---

是的，但不是通过使用 OR，您需要使用 and。喜欢，

@media screen and (max-width: 995px) and (max-height: 700px) {
   ...
}

而且，我们可以这样做。逗号表示 OR 关系，

@media screen and (max-width: 995px), 
       screen and (max-height: 700px) {
  ...
}

更多信息 - Click here

---