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

简单的回答。

用逗号分隔规则: @media手持，(最小宽度:650px)，(方向:横向){…｝

长话短说。

这里有很多信息，但我试图让它信息密集，而不是简单的文字。这是一个学习自己的好机会!花点时间系统地阅读一下，我希望这对你有帮助。

---

媒体查询

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)

逻辑运算符

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

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

1. AND(和关键字)

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

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

指定的样式规则不会到位，除非以下所有值都为true:

媒体类型为“screen”和 视口至少有700px宽 屏幕方向目前为横向。

注意:我认为这三个特性查询一起使用可以组成一个媒体查询。

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

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

@media手持，(最小宽度:650px)，(方向:横向){…｝

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

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

3.NOT(不是关键字)

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

类似地，注意not关键字否定媒体查询，它不能用于否定媒体查询中的单个特性查询

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

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

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

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

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

4. ONLY (ONLY关键字)

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

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

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

更多信息

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

---

理解媒体查询术语

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

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

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

@media只有屏幕和(最大分辨率:800dpi)，不打印

@media屏幕和(min-width: 700px)，(方向:横向)

@media手持，(min-width: 650px)， (min-aspect-ratio: 1/1)

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

屏幕(注意:这里只使用了一个功能查询。)

只有屏幕

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

只有电视和(设备宽高比:16/9)和(彩色)

不是手持的，(最小宽度:650px)。(注意逗号:这里有两个媒体查询。)

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

屏幕

(min-width: 650 px)

(方向:景观)

(device-aspect-ratio: 16/9)

---

代码片段和信息来源于:

由Mozilla contributor提供的CSS媒体查询(CC-BY-SA 2.5授权)。一些代码示例在使用时进行了微小的修改，以(希望)增加解释的清晰度。

是的，用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媒体查询和逻辑运算符:简要概述

简单的回答。

用逗号分隔规则: @media手持，(最小宽度:650px)，(方向:横向){…｝

长话短说。

这里有很多信息，但我试图让它信息密集，而不是简单的文字。这是一个学习自己的好机会!花点时间系统地阅读一下，我希望这对你有帮助。

---

媒体查询

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)

逻辑运算符

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

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

1. AND(和关键字)

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

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

指定的样式规则不会到位，除非以下所有值都为true:

媒体类型为“screen”和 视口至少有700px宽 屏幕方向目前为横向。

注意:我认为这三个特性查询一起使用可以组成一个媒体查询。

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

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

@media手持，(最小宽度:650px)，(方向:横向){…｝

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

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

3.NOT(不是关键字)

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

类似地，注意not关键字否定媒体查询，它不能用于否定媒体查询中的单个特性查询

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

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

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

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

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

4. ONLY (ONLY关键字)

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

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

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

更多信息

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

---

理解媒体查询术语

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

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

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

@media只有屏幕和(最大分辨率:800dpi)，不打印

@media屏幕和(min-width: 700px)，(方向:横向)

@media手持，(min-width: 650px)， (min-aspect-ratio: 1/1)

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

屏幕(注意:这里只使用了一个功能查询。)

只有屏幕

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

只有电视和(设备宽高比:16/9)和(彩色)

不是手持的，(最小宽度:650px)。(注意逗号:这里有两个媒体查询。)

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

屏幕

(min-width: 650 px)

(方向:景观)

(device-aspect-ratio: 16/9)

---

代码片段和信息来源于:

由Mozilla contributor提供的CSS媒体查询(CC-BY-SA 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 */
}

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

@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

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