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 声明来完成的。 这可用于在多种情况下以不同方式显示网页：无论您是使用不同纵横比的平板电脑还是电视，是否您的设备具有彩色或黑白屏幕，或者，也许最常见的是，当用户更改浏览器的大小或在具有不同屏幕大小的浏览设备之间切换时（通常来说，这样的设计称为@ 987654322@)

逻辑运算符

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

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

1. AND（and 关键字）

要求必须满足所有指定的条件，样式规则才会生效。

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

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

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

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

2。或（逗号分隔列表）

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

@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) { ... }

此处指定的样式将在以下情况下生效

1. 媒体类型和最小分辨率不能同时满足它们的要求（分别为“屏幕”和“300dpi”）或
2. 视口至少有 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)

---

代码sn-ps和信息来源于：

CSS media queries by Mozilla Contributors（在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) {
  ...
}