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

When writing a CSS media query, is there any way you can specify multiple conditions with "OR" logic?

在编写CSS媒体查询时，是否可以使用“或”逻辑指定多个条件?

I'm attempting to do something like this:

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

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

2 个解决方案

#1

Use a comma to specify two (or more) different rules:

使用逗号指定两个(或多个)不同的规则:

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

From https://developer.mozilla.org/en/CSS/Media_queries/

从https://developer.mozilla.org/en/CSS/Media_queries/

...In addition, you can combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the associated style sheet is applied. This is the equivalent of a logical "or" operation.

…此外，您可以将多个媒体查询组合在一个逗号分隔的列表中;如果列表中的任何媒体查询为真，则应用关联的样式表。这相当于一个逻辑“或”操作。

#2

CSS Media Queries & Logical Operators: A Brief Overview ;)

The quick answer.

快速的答案。

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

用逗号分隔规则:@media掌上型(min-width: 650px)， (orientation: landscape){…}

The long answer.

长时间的答案。

There's a lot here, but I've tried to make it information dense, not just fluffy writing. It's been a good chance to learn myself! Take the time to systematically read though and I hope it will be helpful.

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

---

Media Queries

Media queries essentially are used in web design to create device- or situation-specific browsing experiences; this is done using the @media declaration within a page's CSS. This can be used to display a webpage differently under a large number of circumstances: whether you are on a tablet or TV with different aspect ratios, whether your device has a color or black-and-white screen, or, perhaps most frequently, when a user changes the size of their browser or switches between browsing devices with varying screen sizes (very generally speaking, designing like this is referred to as Responsive Web Design)

在网页设计中，媒体查询主要用于创建特定于设备或环境的浏览体验;这是使用页面CSS中的@media声明完成的。这可以用来显示一个网页不同的大量的情况下:无论你是在平板电脑或电视不同的纵横比,你的设备是否有彩色或黑白屏幕,或者,也许最频繁,当用户改变浏览器的大小或浏览设备之间切换不同屏幕尺寸(一般来说,这样的设计被称为响应网页设计)

Logical Operators

In designing for these situations, there appear to be four Logical Operators that can be used to require more complex combinations of requirements when targeting a variety of devices or viewport sizes.

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

(Note: If you don't understand the the differences between media rules, media queries, and feature queries, browse the bottom section of this answer first to get a bit better acquainted with the terminology associated with media query syntax

(注意:如果您不理解媒体规则、媒体查询和特性查询之间的差异，请首先浏览此答案的底部部分，以便更好地了解与媒体查询语法相关的术语

1. AND (and keyword)

1。(和关键字)

Requires that all conditions specified must be met before the styling rules will take effect.

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

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

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

The specified styling rules won't go into place unless all of the following evaluate as true:

指定的样式规则不会到位，除非所有以下评估为真实:

• The media type is 'screen' and
• 媒体类型是“screen”和
• The viewport is at least 700px wide and
• 视点至少有700px宽
• Screen orientation is currently landscape.
• 屏幕方向目前是横向的。

Note: I believe that used together, these three feature queries make up a single media query.

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

2. OR (Comma-separated lists)

2。或(逗号分隔列表)

Rather than an or keyword, comma-separated lists are used in chaining multiple media queries together to form a more complex media rule

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

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

@media掌上型(min-width: 650px)，(朝向:landscape){…}

The specified styling rules will go into effect once any one media query evaluates as true:

一旦任何一个媒体查询计算为true，指定的样式规则将生效:

1. The media type is 'handheld' or
2. 媒体类型是“手持”或
3. The viewport is at least 650px wide or
4. viewport至少有650px宽或
5. Screen orientation is currently landscape.
6. 屏幕方向目前是横向的。

3. NOT (not keyword)

3所示。不是(关键字)

The not keyword can be used to negate a single media query (and NOT a full media rule--meaning that it only negates entries between a set of commas and not the full media rule following the @media declaration).

not关键字可以用来否定单一的媒体查询(而不是完整的媒体规则——这意味着它只会在@media声明之后的一组逗号和非完整的媒体规则之间进行否定)。

Similarly, note that the not keyword negates media queries, it cannot be used to negate an individual feature query within a media query.*

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

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

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

The styling specified here will go into effect if

这里指定的样式将在if中生效

1. The media type AND min-resolution don't both meet their requirements ('screen' and '300dpi' respectively) or
2. 媒体类型和最小分辨率都不满足它们的要求(分别是“screen”和“300dpi”)或
3. The viewport is at least 800 pixels wide.
4. 视点至少有800像素宽。

In other words, if the media type is 'screen' and the min-resolution is 300 dpi, the rule will not go into effect unless the min-width of the viewport is at least 800 pixels.

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

(The not keyword can be a little funky to state. Let me know if I can do better. ;)

(not关键字可能有点奇怪。如果我能做得更好，请告诉我。,)

4. ONLY (only keyword)

4所示。只(关键字)

As I understand it, the only keyword is used to prevent older browsers from misinterpreting newer media queries as the earlier-used, narrower media type. When used correctly, older/non-compliant browsers should just ignore the styling altogether.

正如我所理解的那样，唯一的关键字是用来防止老的浏览器将较新的媒体查询错误地解释为使用earlier的，更窄的媒体类型。如果使用正确，老的/不兼容的浏览器应该完全忽略样式。

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

An older / non-compliant browser would just ignore this line of code altogether, I believe as it would read the only keyword and consider it an incorrect media type. (See here and here for more info from smarter people)

旧的/不兼容的浏览器会完全忽略这一行代码，因为它会读取唯一的关键字并认为它是错误的媒体类型。(详情请点击这里和这里)

FOR MORE INFO

更多信息

For more info (including more features that can be queried), see: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

有关更多信息(包括可以查询的更多特性)，请参见:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

---

Understanding Media Query Terminology

Note: I needed to learn the following terminology for everything here to make sense, particularly concerning the not keyword. Here it is as I understand it:

注意:我需要学习以下术语来解释这里的一切，特别是关于not关键字。以下是我的理解:

A media rule (MDN also seems to call these media statements) includes the term @media with all of its ensuing media queries

媒体规则(MDN似乎也调用这些媒体语句)包括术语@media及其随后的所有媒体查询

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

@media all and(最小宽度:800px)

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

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

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

@media screen和(min-width: 700px)，(方向:景观)

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

@media掌上型(min-width: 650px)， (min-aspe -ratio: 1/1)

A media query is a set of feature queries. They can be as simple as one feature query or they can use the and keyword to form a more complex query. Media queries can be comma-separated to form more complex media rules (see the or keyword above).

媒体查询是一组特性查询。它们可以像一个功能查询一样简单，也可以使用and关键字来形成更复杂的查询。媒体查询可以用逗号分隔，以形成更复杂的媒体规则(请参阅上面的or关键字)。

screen (Note: Only one feature query in use here.)

屏幕(注意:这里只使用一个特性查询)。

only screen

只有屏幕

only screen and (max-resolution:800dpi)

只有屏幕和(最大分辨率:800 dpi)

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

只有电视和(设备比例:16/9)和(颜色)

NOT handheld, (min-width: 650px). (Note the comma: there are two media queries here.)

不是手持(min-width:650 px)。(注意逗号:这里有两个媒体查询。)

A feature query is the most basic portion of a media rule and simply concerns a given feature and its status in a given browsing situation.

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

screen

屏幕

(min-width: 650px)

(min-width:650 px)

(orientation: landscape)

(方向:景观)

(device-aspect-ratio: 16/9)

(device-aspect-ratio:16/9)

---

Code snippets and information derived from:

代码片段和来自:

CSS media queries by Mozilla Contributors (licensed under CC-BY-SA 2.5). Some code samples were used with minor alterations to (hopefully) increase clarity of explanation.

由Mozilla贡献者提供的CSS媒体查询(根据CC-BY-SA 2.5授权)。一些代码示例被用于对(希望)增加解释的清晰度进行微小修改。