p2h.cn讯：CSS3 Media Queries(多媒体查询)是一个基于css3技术的网页响应技术，包括最近热门的bootstrap和国内的 渴切-开源中文css框架都不约而同的采用了css3多媒体查询技术。 这项技术最大的作用在于可以让pc页面只适应移动设备的浏览器终端。所以受到了热烈的欢迎。

如果你想使用这个技术，推荐下载 渴切-开源中文css框架。即能快速感受这项技术的特质。蓝狮官网或者给予它快速进行css开发。

if

逻辑查询的语句“if”语句：if 语句在浏览器里是true，就执行 里面的内容；

and
关键词 and

@media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
or
逗号分隔

@media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}

Not
反向逻辑用关键词“not”

@media not all and (max-width: 600px) {
html { background: red; }
}
仅 仅用“not(max-width: 600px)”似乎并不起作用，因为上面的语法稍微怪了一些。或许有人能为我解释一下。需注意的是这不仅仅适用于当前的Media Queries，如果你用逗号隔开的话， 它只对Media Queries 的内部起作用。还要注意 反向逻辑“not”和整个Media Queries是一个整体，不是单独的一部分。 not x and y = not (x and y) ≠ (not x) and y

独有性
确保同时只有一个media query 能够使用，使用精确的数字，能够更好的管理它们。

@media (max-width: 400px) {
html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
@media (min-width: 801px) {
html { background: blue; }
}
逻辑上这看起来像是一个“switch”语句，只是它木有 像“switch”那样的default。

重定义
在同一时间可能会有超过一个Media Queries的时候，使用这个可能更有效，

@media (min-width: 400px) {
html { background: red; }
}
@media (min-width: 600px) {
html { background: green; }
}
@media (min-width: 800px) {
html { background: blue; }
}

Media Queries的添加木有啥特定性，但是源顺序是很重要的。上面的代码他们的顺序正确，将会正常工作。交换他们的顺序后，将会出现不可预料的后果。

手机优先（Mobile First）
你的小屏幕样式必须在你的正常样式的下面才能覆盖正常的样式。因此一般用“min-width” media queries；

html { background: red; }
@media (min-width: 600px) {
html { background: green; }
}

桌面优先（Desktop First）
你的大屏幕样式必须在你的正常样式的下面才能覆盖正常的样式。蓝狮注册因此一般用“max-width” media queries；

html { background: red; }
@media (max-width: 600px) {
html { background: green; }
}

怪异的
你可以用这个做任意复杂的事情。

@media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
注意 “only” 这个标示符是用来避免 非显示设备请求（意思就是仅仅支持screen) 的浏览器，来请求或者使用这些样式。
不确定过去和现在他是否有用。

PS：本人第一次整篇翻译英文文档，会有很多不太恰当的翻译，请见谅。如果您有什么意见和建议请留言或者给我发Email。另：非常感谢同事周鉴童鞋、ken对本次翻译的支持。
原文：Logic in Media Queries

标签：CSS3 Media Queries, 多媒体查询