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

Question

在编写 CSS 媒体查询时，有什么方法可以使用“OR”逻辑指定多个条件？

我正在尝试做这样的事情：

 /* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}

原文由 Fraser 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 @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

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

原文由 Fabrizio Calderan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

快速回答。

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

长答案。

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

---

媒体查询

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

逻辑运算符

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

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

1. AND（ 和 关键字）

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

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

指定的样式规则不会生效，除非以下 所有 条件都为真：

• 媒体类型是“屏幕” 和
• 视口至少有 700 像素宽 并且
• 屏幕方向当前为横向。

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

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

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

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

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

1. 媒体类型是“手持式” 或
2. 视口至少有 650 像素宽 或
3. 屏幕方向当前为横向。

3. NOT（ 非 关键字）

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

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

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

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

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

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

（not 关键字可能有点古怪。如果我能做得更好，请告诉我。;）

4. ONLY（ 唯一 关键字）

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

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

较旧的/不兼容的浏览器会完全忽略这行代码，我相信它会读取 唯一 的关键字并将其视为不正确的媒体 _类型_。 （有关更聪明的人的更多信息，请参见 此处 和 此处）

了解更多信息

有关更多信息（包括可以查询的更多功能），请参阅： 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)

媒体 查询 是一组特征查询。它们可以像一个特征查询一样简单，也可以使用 和 关键字来形成更复杂的查询。媒体查询可以用逗号分隔以形成更复杂的媒体规则（参见上面的 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)

---

代码片段和信息来源于：

Mozilla 贡献者 的 CSS 媒体查询（根据 CC-BY-SA 2.5 获得许可）。使用了一些代码示例并进行了细微改动，以（希望）提高解释的清晰度。

原文由 matthewsheets 发布，翻译遵循 CC BY-SA 3.0 许可协议