小开

最佳答案

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

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

从# EYZ0

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

小开

CSS媒体查询逻辑运算符:概述

简单的回答。

用逗号分隔规则: # EYZ0

长话短说。

这里有很多信息，但我试图让它信息密集，而不是简单的文字。这是一个学习自己的好机会!# EYZ0

媒体查询

这可以用于在大量情况下以不同的方式显示网页:无论你是在平板电脑还是电视上，无论你的设备是彩色还是黑白屏幕，或者，可能是最常见的，当用户改变浏览器的大小或在不同屏幕大小的浏览设备之间切换时(非常一般地说，这样的设计被称为响应式网页设计)。

逻辑运算符

在针对这些情况进行设计时，当针对各种设备或视窗尺寸时，似乎可以使用四个逻辑运算符来要求更复杂的需求组合。

(注意:如果您不理解媒体规则、媒体查询和功能查询之间的区别，请先浏览此回答的底部部分，以更好地熟悉与媒体查询语法相关的术语

1. AND ( AND 关键字)

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

# EYZ0

除非下面的所有值为true，否则指定的样式规则不会生效:

媒体类型为'screen' 而且
视口至少700px宽而且
屏幕方向目前为横向。

注意:我相信，这三个功能查询一起使用，就构成了一个媒体查询。

2. OR (逗号分隔的列表)

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

# EYZ0

指定的样式规则将在任何一个媒体查询的值为true时生效:

媒体类型为“手持”或
视口至少650px宽或
屏幕方向目前为横向。

3.NOT ( NOT 关键字)

不关键字可以是用于对单个媒体查询求反(而不是一个完整的媒体规则——这意味着它只否定一组逗号之间的条目，而不是@media声明后面的完整媒体规则)。

类似地，请注意表示不关键字否定媒体查询，不能则用于否定媒体查询中的单个特征查询

# EYZ0

如果。此处指定的样式将生效

媒体类型和最小分辨率不要两个满足他们的要求(分别是'screen'和'300dpi') 或
视口至少有800像素宽。

换句话说，如果媒体类型是'screen'，最小分辨率是300 dpi，规则将不生效，除非视口的最小宽度至少是800像素。

(使用not关键字可能会有点奇怪。如果我能做得更好，请告诉我。；）

4. ONLY ( ONLY 关键字)

根据我的理解，只有关键字是用于防止旧浏览器错误解释新媒体查询作为早期使用的较窄的媒体类型。如果使用正确，旧的/不兼容的浏览器应该完全忽略样式。

# EYZ0

一个旧的/不兼容的浏览器会完全忽略这行代码，我相信它会读取只有关键字，并认为它是一个不正确的媒体类型。(参见在这里和在这里，从更聪明的人那里获得更多信息)

更多信息

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

理解媒体查询术语

注意:为了理解这里的所有内容，我需要学习以下术语，特别是关于不关键字。以下是我的理解:

媒体规则  (MDN似乎也称这些媒体声明)包含术语@media及其所有后续媒体查询

# EYZ0

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

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

# EYZ0

不是# EYZ0。(注意逗号:这里有两个媒体查询。)

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

# EYZ0

代码片段和信息来源于:

CSS媒体查询由Mozilla的贡献者(授权于使用2.5)。一些代码示例在使用时进行了微小的修改，以(希望)增加解释的清晰度。

小开

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

小开

是的，使用and，像这样:

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

小开

是的，但不是通过使用OR，你需要使用and。就像,

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

我们也可以这样做。逗号表示“或”关系，

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

更多信息- 点击这里

CSS媒体查询:max-width或max-height

CSS媒体查询逻辑运算符:概述

媒体查询

逻辑运算符

理解媒体查询术语