CSS媒体查询＆amp;逻辑运算符：简要概述;）

Question

编写CSS媒体查询时，有没有办法用“OR”逻辑指定多个条件？

我正试图做这样的事情：

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

Answer 1

使用逗号指定两个（或更多）不同的规则：

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

来自https://developer.mozilla.org/en/CSS/Media_queries/

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

Answer 2

CSS媒体查询＆amp;逻辑运算符：简要概述;）

快速回答。

用逗号分隔规则： @media handheld, (min-width: 650px), (orientation: landscape) { ... }

答案很长。

这里有很多，但我试图让信息密集，而不仅仅是蓬松的写作。这是一个学习自己的好机会！ 花点时间系统地阅读，我希望它会有所帮助。

媒体查询

媒体查询主要用于网页设计，以创建特定于设备或情境的浏览体验;这是通过页面CSS中的@media声明来完成的。这可用于在很多情况下以不同方式显示网页：您是否在平板电脑上或者具有不同宽高比的电视，无论您的设备是彩色屏幕还是黑白屏幕，或者最常见的情况是用户更改浏览器的大小或在不同屏幕尺寸的浏览设备之间切换（一般来说，像这样的设计被称为Responsive Web Design）

逻辑运算符

在针对这些情况进行设计时，似乎有 四个逻辑运算符 ，可用于在定位各种设备时需要更复杂的需求组合或{{ 3}}尺寸。

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

<强> 1。 AND（和关键字）

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

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

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

媒体类型是＆＃39;屏幕＆＃39; 和
视口至少为700px宽和
屏幕方向目前正处于风景中。

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

<强> 2。或（以逗号分隔的列表）

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

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

指定的样式规则将在任何一个媒体查询评估为真后生效：

媒体类型是“掌上电脑”。或
视口至少为650像素宽或
屏幕方向目前正处于风景中。

第3。 NOT（不关键字）

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

同样地，viewport not 关键字否定媒体查询，无法用于否定媒体查询中的单个要素查询。*

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

此处指定的样式将在

媒体类型和最小分辨率不满足他们的要求（分别是＆＃39;屏幕和＆＃39; 300dpi＆＃39;）或
视口宽度至少为800像素。

换句话说，如果媒体类型是＆＃39;屏幕＆＃39;并且最小分辨率为300 dpi，除非视口的最小宽度至少为800像素，否则规则将不生效。

（非关键字可能有点陈词滥调。如果我能做得更好，请告诉我。;）

<强> 4。仅限（仅关键字）

据我了解，仅关键字用于防止旧浏览器误解新媒体查询，作为较早使用的较窄媒体类型。如果使用得当，旧的/不兼容的浏览器应该完全忽略样式。

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

旧的/不兼容的浏览器会完全忽略这行代码，我相信它会读取 only 关键字，并将其视为不正确的媒体类型。（有关智慧人士的详情，请参阅note和here）

更多信息

有关详细信息（包括可以查询的更多功能），请参阅：here

了解媒体查询术语

注意：我需要学习以下术语，以便有意义，特别是关于 not 关键字。据我所知，这是：

媒体规则 （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)

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

screen（注意：此处仅使用一个要素查询。）

only screen

only screen and (max-resolution:800dpi)

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

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

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

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

代码摘要和来自的信息：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

CSS media queries

Mozilla Contributors

Answer 3

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

Answer 4

是的，使用 and，例如：

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

CSS媒体查询：max-width OR max-height

4 个答案:

CSS媒体查询＆amp;逻辑运算符：简要概述;）

媒体查询

逻辑运算符

了解媒体查询术语