/*宽度为800px或者方向为纵向时激活*/
@media (min-width:800px) or (orientation:portrait) { … }
/*宽度不是800px时激活*/
@media (not min-width:800px) { … }
4、宽度和高度非常相似，所以二者的条件可以在一起使用：
@media (min-width:800px) and (min-height:400px) { … }orientation查询：
@media (orientation:portrait) { … }不带max-或min-的查询，当然这种查询的的可用性不是很大：
@media (width:800px) and (height:400px) { … }
5、常见媒体查询
因为 Apple 首次向市场推出了用户智能手机和平板电脑产品，所以下列大多数媒体查询都是基于这些型号的设备。
如果目标是横向模式智能手机，则使用： @media (min-width: 321px) { … }
如果目标是纵向模式智能手机，则使用： @media (max-width: 320px) { … }
如果目标是横向模式 Apple iPad，则使用： @media (orientation: landscape) { … }
如果目标是纵向模式 iPad，则使用： @media (orientation: portrait) { … }
您可能已经注意到了，iPad 上使用的是 orientation 媒体特性，而 width 用于 Apple iPhone 之上。主要是因为 iPhone 不支持orientation 媒体特性。您必须使用 width 模拟这些方向断点。
6、嵌套的媒体查询：
XML/HTML Code复制内容到剪贴板
#header {
width: 400px;
@media (min-width: 800px) {
width: 100%;
}
}
以上代码编译后为以下的结果：
XML/HTML Code复制内容到剪贴板
#header {
width: 400px;
}
@media (min-width: 800px) {
#header {
width: 100%;
}
}
以上以宽度为例来对媒体查询进行一个小结， 管中窥豹，可见一斑。width和height只是两种可以用媒体查询来进行控制的属性，还有颜色（color）、颜色索引（integer）、宽高比（ratio）等属性都是也可以使用的。
以上这篇使用CSS媒体查询创建响应式布局教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
原文地址：http://www.cnblogs.com/mcbye/archive/2016/03/29/CssMediaQueries.html
