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

CSS media queries: max-width OR max-height

提问by Fraser

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

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

I'm attempting to do something like this:

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

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

回答by Fabrizio Calderan

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.

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

回答by matthewsheets

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; this is done using the @mediadeclaration 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)

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

Logical Operators

逻辑运算符

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

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

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

1. AND（和关键字）

Requires that all conditions specified must be metbefore 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 allof the following evaluate as true:

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

• The media type is 'screen' and
• The viewport is at least 700px wide and
• Screen orientation is currently landscape.

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

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

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

2. OR (Comma-separated lists)

2. OR（逗号分隔的列表）

Rather than an orkeyword, 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) { ... }

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

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

一旦任何一个媒体查询评估为 true，指定的样式规则就会生效：

1. The media type is 'handheld' or
2. The viewport is at least 650px wide or
3. Screen orientation is currently landscape.

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

3. NOT (notkeyword)

3. NOT（非关键字）

The notkeyword 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).

该不是关键字可以用来否定一个媒体查询（而不是整个媒体排除--meaning，它只是一组逗号，而不是完整的媒体统治继@media声明之间否定项）。

Similarly, notethat the notkeyword negates media queries, it cannotbe 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

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

1. The media type AND min-resolution don't bothmeet their requirements ('screen' and '300dpi' respectively) or
2. The viewport is at least 800 pixels wide.

1. 媒体类型和最小分辨率均不符合要求（分别为“屏幕”和“300dpi”）或
2. 视口的宽度至少为 800 像素。

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

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

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

（not 关键字的表述可能有点时髦。如果我能做得更好，请告诉我。;）

4. ONLY (onlykeyword)

4. ONLY（唯一关键字）

As I understand it, the onlykeyword is used to prevent older browsers from misinterpreting newer media queriesas 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" />

<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 onlykeyword and consider it an incorrect media type. (See hereand herefor 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 notkeyword. Here it is as I understand it:

注意：我需要学习以下术语才能理解这里的所有内容，特别是关于not关键字。这是我的理解：

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

一个媒体规则（MDN似乎也称这些媒体的声明）包括术语@media及其所有随后的媒体查询

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

@media all and (min-width: 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 and (min-width: 700px), (orientation: landscape)

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

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

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

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

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

screen（注意：这里只使用了一个特征查询。）

only screen

only screen

only screen and (max-resolution:800dpi)

only screen and (max-resolution:800dpi)

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

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

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

不是handheld, (min-width: 650px)。（注意逗号：这里有两个媒体查询。）

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

一个功能查询是一个媒体的规则最基本的部分，只是涉及一个给定的功能及其在给定的浏览情况的状态。

screen

screen

(min-width: 650px)

(min-width: 650px)

(orientation: landscape)

(orientation: landscape)

(device-aspect-ratio: 16/9)

(device-aspect-ratio: 16/9)

---

---

Code snippets and information derived from:

代码片段和信息来源于：

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

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

回答by Navneet Kumar

There are two ways for writing a proper media queries in css. If you are writing media queries fro larger device first then the correct way of writing will be :

有两种方法可以在 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 */
}

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