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

Question

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

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

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

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

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

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)

媒体查询是一组特征查询。它们可以像一个特征查询一样简单，也可以使用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)

---

代码片段和信息来源于：

Mozilla 贡献者的CSS 媒体查询（根据CC-BY-SA 2.5许可）。使用了一些代码示例，并稍作改动以（希望）增加解释的清晰度。

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

Answer 4

是的，使用and，例如：

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