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) { ... }
长的答案。
这里有很多，但我试图让信息密集，不仅仅是蓬松的写作。 这是学习自己的好机会！ 花时间系统地阅读，但我希望这会有所帮助。
媒体查询
媒体查询本质上用于网页devise中，以创build设备或情境特定的浏览体验; 这是通过在页面的CSS中使用@media声明完成的。 在许多情况下，这可以用来以不同的方式显示网页：无论您是平板电脑还是不同宽高比的电视机，您的设备是彩色还是黑白屏幕，或者是最常见的时候用户改变其浏览器的大小或者在具有不同屏幕尺寸的浏览设备之间切换（一般而言，这样的devise被称为响应式网页devise ）
逻辑运算符
在针对这些情况进行devise时，似乎有四个逻辑运算符可用于在定位各种设备或视口大小时要求更复杂的要求组合。
（注意：如果您不理解媒体规则，媒体查询和function查询之间的差异，请首先浏览此答案的底部，以更好地了解与媒体查询语法相关的术语
1. AND（ 和关键字）
在样式规则生效之前， 必须满足所有指定的条件 。
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
指定的样式规则将不会到位，除非所有以下评估为真：
- 媒体types是“屏幕” 和
- 视口宽度至less为700px
- 屏幕方向当前是风景。
注意：我相信这三个function查询一起使用组成一个媒体查询 。
2.或（ 逗号分隔的列表 ）
用逗号分隔的列表而不是一个或关键字，将多个媒体查询链接在一起，形成一个更复杂的媒体规则
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
一旦任何媒体查询评估为真 ，指定的样式规则将生效 ：
- 媒体types是“手持式” 或
- 视口宽度至less为650px
- 屏幕方向当前是风景。
3.不（ 不是关键字）
not关键字可用于否定单个媒体查询 （而不是完整的媒体规则 – 意味着它只会否定一组逗号之间的条目，而不是@media声明之后的完整媒体规则）。
同样， 请注意 ， not关键字取消媒体查询，但不能用于取消媒体查询中的单个要素查询。*
@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
这里指定的样式将会生效
- 媒体types和最小分辨率不符合他们的要求（分别是“屏幕”和“300dpi”） 或
- 视口宽度至less为800像素。
换句话说，如果媒体types是“屏幕”，并且最小分辨率是300 dpi，则除非视口的最小宽度至less为800像素，否则该规则不会生效。
（not关键字可能有点时髦，让我知道如果我能做得更好;）
4.只有（ 只有关键字）
据我所知， 唯一的关键字是用来防止旧版本的浏览器将较新的媒体查询误解为较早使用的较窄的媒体types。 如果使用正确，旧的/不兼容的浏览器应该完全忽略样式。
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
一个较旧的/不兼容的浏览器将完全忽略这一行代码，我相信，因为它会读唯一的关键字，并认为它是一个不正确的媒体types 。 （请参阅这里和这里从更聪明的人更多的信息）
了解更多信息
有关更多信息（包括可以查询的更多function），请参阅： 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)
媒体查询是一组function查询。 它们可以像一个function查询一样简单，也可以使用和关键字来形成更复杂的查询。 媒体查询可以用逗号分隔以形成更复杂的媒体规则（请参阅上面的或关键字）。
screen （注意：这里只使用一个function查询。）
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许可）。 一些代码示例被用于稍微改变（希望），以增加解释的清晰度。
