CSS媒体查询：最大
在编写CSS媒体查询时，有什么方法可以用“OR”逻辑指定多个条件？
我试图做这样的事情：
/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
...
}
使用逗号来指定两个（或更多）不同的规则：
@media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
从https://developer.mozilla.org/en/CSS/Media_queries/
...另外，您可以将多个媒体查询组合在逗号分隔列表中; 如果列表中的任何媒体查询为真，则应用关联的样式表。 这相当于一个逻辑“或”操作。
CSS媒体查询和逻辑运营商：简要概述;）
快速回答。
用逗号分隔规则： @media handheld, (min-width: 650px), (orientation: landscape) { ... }
长的答案。
这里有很多，但我试图让信息密集，而不仅仅是蓬松的写作。 这是学习我自己的好机会！ 花时间系统地阅读，但我希望这会有所帮助。
媒体查询
媒体查询本质上用于网页设计中，以创建设备或情境特定的浏览体验; 这是通过在页面的CSS中使用@media声明完成的。 在许多情况下，这可用于以不同方式显示网页：无论您使用平板电脑还是具有不同宽高比的电视机，您的设备是彩色还是黑白屏幕，或者是最常见的时候用户改变其浏览器的大小或者在具有变化的屏幕尺寸的浏览设备之间切换（通常来说，像这样的设计被称为响应式网页设计）
逻辑运算符
在针对这些情况进行设计时，似乎有四个逻辑运算符可用于在定位各种设备或视口大小时需要更复杂的需求组合。
（注意：如果您不了解媒体规则，媒体查询和功能查询之间的差异，请首先浏览此答案的底部，以更好地了解与媒体查询语法相关的术语
1. AND（和关键字）
在样式规则生效之前， 必须满足指定的所有条件 。
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
指定的样式规则不会到位，除非所有以下评估为真：
注意：我相信这三个功能查询一起使用，构成一个媒体查询。
2.或（逗号分隔的列表）
逗号分隔的列表并不是一个或关键字，而是将多个媒体查询链接在一起以形成更复杂的媒体规则
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
一旦任何一个媒体查询评估为真 ，指定的样式规则将生效 ：
3. NOT（不是关键字）
可以使用 not关键字来否定单个媒体查询 （而不是完整的媒体规则 - 这意味着它只会否定一组逗号之间的条目，而不是@media声明之后的完整媒体规则）。
同样，请注意，not关键字取消媒体查询，但不能用于否定媒体查询中的单个功能查询。*
@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
此处指定的样式将在生效时生效
换句话说，如果媒体类型是“屏幕”并且最小分辨率是300 dpi，则除非视口的最小宽度至少为800像素，否则该规则不会生效。
（not关键字可能有点时髦，请告诉我是否可以做得更好;）
4.只有（只有关键字）
据我了解，唯一的关键字是用来防止旧版浏览器将较新的媒体查询误解为较早使用的较窄媒体类型。 如果使用正确，旧版/不兼容的浏览器应该完全忽略这些样式。
<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 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)
源代码片段和信息：
Mozilla撰稿人的CSS媒体查询（CC-BY-SA 2.5许可）。 一些代码示例被用于稍微改变（希望）以增加解释的清晰度。
链接地址: http://www.djcxy.com/p/30003.html