【发布时间】：2011-11-19 18:13:37
【问题描述】：
我正在为不同的 vieqport 或设备宽度定义多个 CSS 媒体查询...
所以我的问题是 2 个 CSS 媒体查询定义块是否可以重叠或仅应用第一个匹配项。它是如何工作的？
另外申请多个设备的正确方法是什么..我的意思是定义的顺序？
【问题讨论】：
标签： iphone ipad css media-queries
【发布时间】：2011-11-19 18:13:37
【问题描述】：
您可以在一个逗号分隔的列表中组合多个媒体查询；如果 列表中的任何媒体查询为真，关联样式 应用表。这相当于逻辑“或”运算。
https://developer.mozilla.org/en/CSS/Media_queries
所以
这相当于逻辑“或”运算
使它看起来只应用了一个匹配项。
http://reference.sitepoint.com/css/mediaqueries 似乎也证实了这一点。
如果这是真的（并且未经我测试），那么无论匹配什么媒体查询，我都会创建一个通用样式表来提供所有通用样式，然后为每个目标设备提供与设备无关的样式表以及其他样式。
【讨论】：
-
非常感谢..但我的问题是，如果我的 css 中有多个 @media 语句用于不同的最小最大宽度，是否有可能应用这些块中的 2 个或仅应用 1 个..请提供任何示例..
-
根据我提供的文档，只能申请一个。但未经测试。
-
刚才谁对这个答案投了反对票……你能解释一下为什么吗？如果有必要，我不介意被否决，但我想知道为什么。我不想再犯同样的错误。
-
有些人认为自己太混蛋了，因此想通过无正当理由降低他人声誉来降低自己的声誉。无论如何，虽然它是逻辑 OR 操作，但不一定是逻辑 XOR（异或）操作，因此可以同时应用多个媒体查询，就像
div#foo和#foo都匹配同一个元素一样。否则，您的回答对我来说似乎很合理，所以+1。
这很奇怪。如果你写：
<link media="screen and (max-width: 1250px)" href="/css/small.css" type="text/css" rel="stylesheet" />
<link media="screen and (max-height: 850px)" href="/css/small.css" type="text/css" rel="stylesheet" />
它的作用类似于 XOR（有 2 个样式表）。如果两个条件都满足（宽度
<link media="screen and (max-width: 1250px), screen and (max-height: 850px)" href="/css/small.css" type="text/css" rel="stylesheet" />
它工作正常。所以逗号是一切的解决方案。
【讨论】：