媒体查询

媒体查询规则：@media all{}将样式应用于所有类型，@media(min-width:800px){}将样式应用于最小宽度为800的@media(min-width:800px) and (max-width:1200px) and (orientation:potrait){}宽度为800-1200且方向是纵向（and 表示同时满足时才会显示，or只要满足其中一个条件即可）@media(not min-width:800px){}

orientation

媒体查询

@media (orientation:portrait) { ... }

高度和宽度行为十分相似，都支持以

min-

和

max-

为前缀。清单 9 展示了一个有效的媒体查询。高度和宽度媒体查询

@media (min-width:800px) and (min-height:400px) { ... }

如果没有

min-

或

max-

前缀，您还可以使用

width

和

height

媒体特性，如清单 10 所示。不带

min-

和

max-

前缀

@media (width:800px) and (height:400px) { ... }

当屏幕正好是 800 像素宽、400 像素高时，可以使用清单 10 中的媒体查询。现实中，像这样的媒体查询可能过于具体而不太有用。检测精确维度是大多数网站访问者都不可能遇到的一个场景。通常情况下，响应式设计会使用范围来执行屏幕检测。作为媒体查询大小范围的后续内容，下一节将讨论一些常见的媒体查询，在设计一个响应式网站时，您可能会发现它们非常有用。

常见媒体查询

因为 Apple 首次向市场推出了用户智能手机和平板电脑产品，所以下列大多数媒体查询都是基于这些型号的设备。如果目标是横向模式智能手机，则使用：

@media (min-width: 321px) { ... }

如果目标是纵向模式智能手机，则使用：

@media (max-width: 320px) { ... }

如果目标是横向模式 Apple iPad，则使用：

@media (orientation: landscape) { ... }

如果目标是纵向模式 iPad，则使用：

@media (orientation: portrait) { ... }

嵌套的媒体查询

#header {width: 400px;@media (min-width: 800px) {width: 100%;}}

编译结果

#header {width: 400px;}@media (min-width: 800px) {#header {width: 100%;}}