在CSS中可以利用多媒体查询（Media query）来实现不同屏幕尺寸的自适应设计（Responsive design），无需书写额外的JS代码即可实现不同设备上的自适应布局。

CSS3多媒体查询

CSS3的多媒体查询继承了CSS2多媒体类型的所有思想：取代了查找设备的类型，CSS3根据设置自适应显示。媒体查询可用于检测很多事情，例如：

• viewport(视窗) 的宽度与高度
• 设备的宽度与高度
• 朝向 (智能手机横屏，竖屏) 。
• 分辨率

多媒体查询语法

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回true或false。

@media not|only mediatype and [expressions] {
    /* CSS Code...; */
}

如果指定的多媒体类型匹配设备类型则查询结果返回true，文档会在匹配的设备上显示指定样式效果。除非使用了not或only操作符，否则所有的样式会适应在所有设备上显示效果。

• not，not是用来排除掉某些特定的设备的，比如@media not print（非打印设备）。

• only，用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

• all: 所有设备。

媒体查询还可以在不同的媒体上使用不同的样式文件：

<link rel="stylesheet" media="mediatype and|not|only [expressions]" href="print.css">

CSS3多媒体类型

CSS3的多媒体类型可以分为以下几种： | 值 | 类型 | | :—– | :——- | | all | 用于所有多媒体类型设备 | | print | 用于打印机 | | screen | 用于电脑屏幕，平板，智能手机等 | | speech| 用于电脑屏幕，平板，智能手机等。 |

多媒体查询简单实例

使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。例如：

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

或者：

@media screen and (min-width: 480px) and (max-width: 1200px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}