CSS媒体查询：max-width或max-height

Question

当编写CSS媒体查询时，是否有办法使用“OR”逻辑指定多个条件？

我正在尝试像这样做：

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

- Fraser

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

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

- Fabrizio Calderan

---

@media screen and (max-width: 568px) and (max-height: 320px) {} - 在我的情况下，这个代码是正确的。 - nosensus

@nosensus，逗号表示OR关系，意味着规则适用于任一条件成立，与原始问题相符。您展示的代码是AND关系，即两个条件都必须成立才能应用规则。 - Drew Noakes

你说得对。“AND”这个规则适用于比例的高度和宽度，因为在某些情况下我们需要这样的规则。例如，你可能有两个设备，一个是320x560，另一个是320x480，设备旋转将破坏你的布局。我的意思是“逗号”和“AND”符号有不同的含义。 - nosensus

Answer 2

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

快速答案。

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

详细回答。

这里有很多内容，但我尽力使其信息密集，而不仅仅是空洞的写作。这是一个很好的机会让我自己学习！花时间系统地阅读，希望对您有所帮助。

---

媒体查询

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

逻辑运算符

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

(Note: 如果您不理解媒体规则、媒体查询和特性查询之间的区别，请先浏览本答案底部的部分，以更好地了解与媒体查询语法相关的术语)

1. AND (and关键字) 要求在样式规则生效之前必须满足所有指定条件。

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

只有以下所有情况都为真时，指定的样式规则才会生效：

- 媒体类型是“screen”，且 - 视口宽度至少为700像素，且 - 屏幕方向当前为横向。

注意：我认为这三个特性查询一起使用，组成一个单独的媒体查询。

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

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

指定的样式规则将在以下条件之一成立时生效:

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

3. NOT （not关键字）

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

类似地，note，由于not关键字否定媒体查询，因此不能用于否定媒体查询中的单个特征查询。

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

如果媒体类型和最小分辨率都不满足要求（分别为“screen”和“300dpi”），或者视口宽度至少为800像素，则将应用此处指定的样式。

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

（“not”关键字可能有点奇怪。如果需要更好的解释，请告诉我。；）

4. ONLY（only关键字）

据我了解，“only”关键字用于防止旧浏览器错误地将较新的媒体查询解释为先前使用的较窄的媒体类型。当正确使用时，旧版/不兼容的浏览器应完全忽略样式。

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

一种较老/不兼容的浏览器将完全忽略这行代码，因为它会读取“only”关键字并将其视为错误的媒体类型。（更多信息请参见这里和这里的更聪明人提供的信息。） <\p> <\p>获取更多信息<\p> <\p>要了解更多信息（包括可查询的更多功能），请参见：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators<\p>

---

理解媒体查询的术语

注：要理解本文，尤其是涉及到“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（注意：这里只使用了一个功能查询。）

只有屏幕

只有屏幕并且(max-resolution:800dpi)

只有电视并且(device-aspect-ratio: 16/9) 并且(color)

不包括手持设备, (min-width: 650px)。注意逗号: 这里有两个媒体查询条件。

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

屏幕

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

---

代码片段和信息来源于：

CSS媒体查询由Mozilla贡献者提供（根据CC-BY-SA 2.5许可）。一些代码示例经过轻微修改以增加解释的清晰度。

- matthewsheets

---

非常好的回答，但是可以通过添加引言来更加简洁地提供所需的答案（“max-width OR max-height”），然后再提供详细的支持性内容。许多用户希望能够立即获得解决方案，而不必花费比必要学习曲线更广泛的时间。作为一个用户，我更希望能够找到一个即时的答案，并且有选择地追求额外的背景知识，而不是在额外的背景内容中寻找答案。无论如何，做得很好并且格式清晰。 - Clarus Dignus

虽然这篇文章写得很好，但我不确定一个特定的问题是否适合作为整个媒体查询指南的好地方。或者反过来说，这个问题太具体了，无法充分展示答案的价值。此外，“特性查询”一词并没有出现在“媒体查询”中，它出现在不同的CSS规范中，在媒体查询的上下文中使用这个术语会让人产生困惑——但应该告诉第一次在MDN文章中使用这个术语的人。截至到媒体查询4版本，正确的术语是“媒体条件”。 - BoltClock

假设我需要支持所有的iPhone设备，那么我是否应该为每个设备单独编写媒体查询，例如iPhone 5（纵向和横向），iPhone6，iPhone 6 Plus等。如果是这样，我将不得不编写更多的媒体查询来覆盖所有设备的大小。我的理解正确吗？ - Ramya Velivala

Answer 3

在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 */
}

- Navneet Kumar

Answer 4

yes, using and, like:

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

- Gianmarco Montanari

---

这与被接受的答案相同，该答案获得了1000个赞成票。 - Kalnode

Answer 5

是的，但不能使用 OR，需要使用and。像这样：

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

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

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

更多信息 - 点击这里

- Vihan Gammanpila