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

本文翻译自：CSS media queries: max-width OR max-height

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

---

#1楼

参考：https://stackoom.com/question/lqtU/CSS媒体查询-最大宽度或最大高度

---

#2楼

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. 如果列表中的任何媒体查询为true，则将应用关联的样式表。 This is the equivalent of a logical "or" operation. 这等效于逻辑“或”运算。

---

#3楼

CSS Media Queries & Logical Operators: A Brief Overview ;) CSS媒体查询和逻辑运算符：简要概述;）

The quick answer. 快速答案。

Separate rules with commas: @media handheld, (min-width: 650px), (orientation: landscape) { ... } 逗号分隔的规则： @media handheld, (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; 媒体查询本质上用于Web设计中，以创建特定于设备或特定情况的浏览体验。 this is done using the @media declaration within a page's CSS . 这是通过页面CSS中的@media声明完成的。 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 ) 在许多情况下，这可以用于不同地显示网页：无论您是使用平板电脑还是电视使用不同的宽高比，设备是彩色屏幕还是黑白屏幕，或者可能是最常见的情况是用户更改其浏览器的大小或在具有不同屏幕尺寸的浏览设备之间进行切换（通常，将这种设计称为“ 响应式网页设计” ）

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. AND（ 和关键字）

Requires that all conditions specified must be met before the styling rules will take effect. 要求在样式规则生效之前必须满足所有指定的条件 。

@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 媒体类型为“屏幕” ，
• 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 用逗号分隔的列表而不是or关键字将多个媒体查询链接在一起以形成更复杂的媒体规则

@media handheld, (min-width: 650px), (orientation: 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. The viewport is at least 650px wide or 视口的宽度至少为650px， 或者
3. Screen orientation is currently landscape. 屏幕方向当前为横向。

3. NOT ( not keyword) 3. NOT（ 不是关键字）

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

The styling specified here will go into effect if 此处指定的样式将在以下情况下生效

1. The media type AND min-resolution don't both meet their requirements ('screen' and '300dpi' respectively) or 媒体类型和最小分辨率均不满足其要求（分别为“屏幕”和“ 300dpi”） 或
2. The viewport is at least 800 pixels wide. 视口至少为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. 换句话说，如果媒体类型为“屏幕”且最小分辨率为300 dpi，则该规则将不会生效，除非视口的最小宽度至少为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. 如果正确使用，则较旧/不兼容的浏览器应完全忽略样式。

<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. 注意：为了使这里的所有内容都有意义，我需要学习以下术语，尤其是关于not关键字。 Here it is as I understand it: 据我所知：

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 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)

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. 它们可以像一个功能查询一样简单，也可以使用and关键字构成一个更复杂的查询。 Media queries can be comma-separated to form more complex media rules (see the or keyword above). 媒体查询可以用逗号分隔以形成更复杂的媒体规则（请参见上面的or关键字）。

screen (Note: Only one feature query in use here.) screen （注意：此处仅使用一个功能查询。）

only screen

only screen and (max-resolution:800dpi)

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

NOT handheld, (min-width: 650px) . 非handheld, (min-width: 650px) 。 (Note the comma: there are two media queries here.) （请注意逗号：这里有两个媒体查询。）

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)

(orientation: landscape)

(device-aspect-ratio: 16/9)

---

Code snippets and information derived from: 代码片段和信息来源于：

CSS media queries by Mozilla Contributors (licensed under CC-BY-SA 2.5 ). Mozilla贡献者提供的 CSS媒体查询 （根据CC-BY-SA 2.5许可）。 Some code samples were used with minor alterations to (hopefully) increase clarity of explanation. 使用一些代码示例进行了较小的更改，以（希望）增加解释的清晰度。

---

#4楼

There are two ways for writing a proper media queries in css. 有两种方法可以在CSS中编写适当的媒体查询。 If you are writing media queries fro larger device first then the correct way of writing will be : 如果您首先从较大的设备写入媒体查询，则正确的写入方式将是：

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

But if you are writing media queries for smaller device first then it would be something like : 但是，如果您首先要为较小的设备编写媒体查询，则可能是这样的：

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}