1.媒体类型
HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性, 扩展了媒体类型的功能;
2.媒体特性检测
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成, 媒体查询中可用于检测的媒体特性有width、height和color（等）, 使用媒体查询, 可以在不改变页面内容的情况下, 为特定的一些输出设备定制显示效果; 主要常用的是width, device-width;
width:视口宽度 height:视口高度 device-width:渲染表面的宽度（对我们来说，就是设备屏幕的宽度） device-height:渲染表面的高度（对我们来说，就是设备屏幕的高度） orientation:检查设备处于横向还是纵向 aspect-ratio:基于视口宽度和高度的宽高比, 一个16∶9比例的显示屏可以这样定义aspect-ratio: 16/9 device-aspect-ratio:和aspect-ratio类似, 基于设备渲染平面宽度和高度的宽高比 color:每种颜色的位数, 例如min-color: 16会检测设备是否拥有16位颜色 color-index:设备的颜色索引表中的颜色数, 值必须是非负整数 monochrome:检测单色帧缓冲区中每像素所使用的位数, 值必须是非负整数，如monochrome: 2 resolution:用来检测屏幕或打印机的分辨率，如min-resolution: 300dpi, 还可以接受每厘米像素点数的度量值, 如min-resolution: 118dpcm scan:电视机的扫描方式，值可设为progressive（逐行扫描）或interlace（隔行扫描）, 如720p HD电视（720p的p即表明是逐行扫描）匹配scan: progressive，而1080i HD电视（1080i中的i表明是隔行扫描）匹配scan: interlace grid:用来检测输出设备是网格设备还是位图设备
在上述所有特性中, 除scan和grid之外, 都可使用min和max前缀来创建一个查询范围
3.使用媒体查询的三种方式
1).在CSS文件引用时使用
你是一块纵向(orientation: portrait)放置的显示屏(screen)吗?如果是则加载指定CSS文件
<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait-screen.css" />
限制只有视口宽度大于800像素(min-width: 800px)的显示屏设备(screen)才能加载该CSS文件
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen.css" />
限制只有{视口宽度大于800像素(min-width: 800px)的显示屏设备(screen)}或者投影仪(projection)才能加载该CSS文件
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css" />
2).在CSS样式表中使用
如果是显示屏(screen)并且屏幕分辨率小于等于400px(max-device-width: 400px)时h1的颜色为绿色, 注意device-width为设备显示屏宽度, width为视口宽度
@media screen and (max-device-width: 400px) {
h1 {color: green;}
}
3).在样式表中引入其他样式表时
如果是显示屏(screen)并且屏幕分辨率小于等于400px(max-width: 360px)时倒入phone.css文件
@import url("phone.css") screen and (max-width:360px);
PS: 此方法会增加HTTP请求, 慎用
Respond.js（https://github.com/scottjehl/Respond）是为Internet Explorer 8及更低版本增加媒体查询支持的最快的JavaScript工具, 但它目前无法解析CSS的@import命令
a