媒体查询
@media at-rules，用于将样式定位到特定媒体，例如屏幕或打印，已在前面介绍过。但这可以进一步提升至更高的复杂程度，使您能够根据屏幕尺寸指定不同的设计选择。这样，页面就可以针对手机、平板电脑和不同浏览器窗口大小进行优化和完全不同的布局。
回顾一下，如果我们想仅将某些 CSS 应用于基于屏幕的媒体，例如，一种选择是在样式表的底部添加类似以下内容：
@media screen {
body { font: 12px arial, sans-serif }
#nav { display: block }
}
特定于浏览器尺寸的 CSS
为了扩展前面的示例，不仅可以定位基于屏幕的媒体，还可以定位特定尺寸的基于屏幕的媒体。
@media screen and (max-width: 1000px) {
#content { width: 100% }
}
这告诉浏览器在视口宽度小于或等于 1000 像素时应用一段 CSS。您可以利用这一点进行简单的操作，例如使内容区域或导航变窄，或者您可以完全重新排列页面布局（例如，将页面部分堆叠在一起，而不是以列的形式显示）。
您可以应用多个 @media 规则，因此您可以拥有多个依赖于浏览器尺寸的不同设计。
@media screen and (max-width: 1000px) {
#content { width: 100% }
}
@media screen and (max-width: 800px) {
#nav { float: none }
}
@media screen and (max-width: 600px) {
#content aside {
float: none;
display: block;
}
}
请注意，如果例如，一个布局区域的宽度小于或等于 600 像素，那么所有这三个规则都会被应用（因为它将小于或等于 1000px、800px 和 600px）。
如果您想以相反的方式进行操作，并对等于或大于特定长度的尺寸应用 CSS，您也可以使用“min-width”代替“max-width”。
特定于方向的 CSS
如果您想根据浏览器的方向应用 CSS，可以尝试类似以下的内容。
@media screen and (orientation: landscape) {
#nav { float: left }
}
@media screen and (orientation: portrait) {
#nav { float: none }
}
这对于移动设备尤其有用……
特定于设备的 CSS
我们不是指为每一种笔记本电脑、手机和驴子——那样太糟糕了——都设计不同的 CSS，而是我们可以以相对清晰的良心（只要我们明智）来指定设备的屏幕尺寸和像素密度。
宽度和高度
device-width、device-height、min-device-width、max-device-width、min-device-height 和 max-device-height 可用于定位设备的计算分辨率。
@media screen and (min-device-height: 768px) and (max-device-width: 1024px) {
/* You can apply numerous conditions separated by "and" */
}
像素密度
需要牢记的是，CSS 像素不一定等于物理像素。例如，虽然屏幕的物理宽度可能是 720 像素，但浏览器可能实际应用 CSS，认为它是 480 像素宽。这样，一个标准设计的网页更有可能适合屏幕。在这个例子中，像素密度为 1.5:1：每 1.5 个 CSS 像素对应一个物理像素。一个普通的桌面显示器将具有 1:1 的像素密度：一个 CSS 像素对应一个物理像素。
如果您只想对这些设备应用样式，您可以使用类似以下的方法：
@media (device-pixel-ratio: 2) {
body { background: url(twiceasbig.png) }
}
这将适用于 iPhone（4 及以上版本），像素密度为 2:1。您还可以使用 min-device-pixel-ratio 和 max-device-pixel-ratio。
其他
您还可以根据设备的 分辨率 应用样式。
@media screen and (resolution: 326dpi) { /* */ }
@media screen and (min-resolution: 96dpi) { /* */ }
或者根据其 纵横比。
@media screen and (device-aspect-ratio: 16/9) { /* */ }