CSS3增加了Media Queries模块，使用这个模块，网页制作者只需要针对不同的浏览器窗口尺寸来编写不同的样式，然后让浏览器根据不同的窗口尺寸来选择使用不同的样式即可。
- 媒体查询使用方法
@media 设备类型 and (设备特性) {样式代码}
/* 浏览器窗口宽度在1000px以上 */
@media screen and (min-width: 1000px) {
}
/* 浏览器窗口宽度在640px以上，999px以下 */
@media screen and (min-width: 640px) and (max-width: 999px) {
}
/* 浏览器窗口宽度在640px以下 */
@media screen and (max-width: 640px) {
}
- 10种设备类型
| 可以指定的值 | 设备类型 |
|---|---|
| all | 所有设备 |
| screen | 电脑显示器 |
| 打印用纸或打印预览视图 | |
| handheld | 便携设备 |
| tv | 电视机类型的设备 |
| speech | 语音和音频合成器 |
| braille | 盲人用点字法触觉回馈设备 |
| embossed | 盲文打印机 |
| projection | 各种投影设备 |
| tty | 使用固定密度字母格栅的媒介，比如电传打字机和终端 |
- 在iPhone中的显示
iPhone的分辨率是320px*480px，所以本应该符合从上往下排列显示的，但是真正运行时，浏览器中显示结果却为两栏。
因为在iphone中使用的Safari浏览器在进行页面显示的时候将窗口宽度作为980px进行显示的。所以即使在页面中已经写好了页面再小尺寸窗口中运行的样式，iPhone中的Safari浏览器也不会使用这个样式，而是选择窗口宽度为980px时所使用的样式。
我们可以利用<meta>标签在页面中指定safari浏览器在处理本页面时按照多少像素的窗口宽度来进行：
<meta name="viewport" content="width=600px" />
- not或only关键字
/**
* 对not后面的语句执行取反操作
* 样式代码将被使用在除便携设备之外的其他设备或非彩色便携设备中
*/
@media not handheld and (color) {样式代码}
/**
* only关键字，让那些不支持Media Queries但是能读取Media Type的设备浏览器，
将表达式中的样式隐藏起来
*/
@media only screen and (color) {样式代码}
对于支持Media Queries的设备来说，将能够正确的应用样式，仿佛only不存在。对于不支持Media Queries但是能够读取Meida Type的设备（譬如IE8只支持“@media screen”）来说，由于先读取到的是only而不是screen，将忽略这个样式。
对于不支持Media Queries的浏览器（譬如IE8之前的浏览器）来说，无论是否有only，都将忽略这个样式。
- 支持对外部样式表的引用
@import url(color.css) screen and (min-width: 1000px);
<link rel="stylesheet" type="text/css"
media="screen and (min-width:1000px)" href="style.css" />
