CSS3媒体查询（Media Query）使用详解

媒体查询（Media Query）是用来针对不同类型、不同参数细节媒体设备定义样式的功能

一、语法格式

@media not|only 设备类型 [ and 设备特性 ]*

二、设备类型的取值

all 所有的设备类型
aural 语音和音频合成器
braille 触觉反馈设备
embossed 盲文印刷设备
handheld 小型或手提设备
print 打印机
projection 投影图像（如幻灯片）
screen 计算机显示器
tty 固定间距字符格的设备（如电传打字机、终端）
tv 电视设备

三、设备特性

语法格式中的[and 设备特性]*表示可以出现0~N次，其中设备特性的取值为：

width，匹配浏览器窗口的宽度，范围值可以用min-width、max-width
height，匹配浏览器窗口的高度，范围值可以用min-height、max-height
aspect-ratio，浏览器窗口的宽度值和高度值的比例，支持min/max前缀
device-width，设备分辨率宽度值，支持min/max前缀
device-height，设备分辨率高度值，支持min/max前缀
device-aspect-ratio，设备分辨率宽高比，支持min/max前缀
color，设备使用的色深位，如真彩色是32，非彩色设备的色深为0，支持min/max前缀
color-index，色彩表中的颜色数，支持min/max前缀
resolution，设备像素密度（如300dpi），支持min/max前缀
scan，设备的扫描方式，只有两个取值：progressive（逐行扫描）和interlace（隔行扫描）
grid，设备是否基于栅格，取值为：1（基于栅格）、0（基于其他方式）

四、实例开发

我们经常会看到一些网页的设计，同一版式在PC端和手机端都可以很好地显示，如：

可以称这种设计为响应式布局，而响应式布局的实现，是可以用媒体查询实现的，以下是实现响应式布局的一个简单DEMO：

<!DOCTYPE html>
<html>
<head>
    <title>responsive layout</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<header>
    <div class="container">头部</div>
</header>

<section class="container">
    <article>左边</article>
    <aside>右边</aside>
</section>

</body>
</html>

css部分：

* { margin: 0px; padding: 0px }

@media screen and (min-width: 960px) {
    .container { width: 960px; margin: auto; }
    header { height: 100px; line-height: 100px; background: #36C; color: #FFF; text-align: center; }
    section { display: flex; flex-direction: row }
    section > article { width: 800px; height: 300px; background: #999 }
    section > aside { width: 150px; height: 200px; background: #CCC; margin-left: 10px }
}

@media screen and (max-width: 960px) {
    header { height: 100px; line-height: 100px; background: #36C; color: #FFF; text-align: center; }
    section { display: flex; flex-direction: column; }
    section > article { height: 200px; background: #999 }
    section > aside { height: 200px; background: #CCC }
}

最终效果：