通过媒体类型（Media Type）只能做一个大概的区分，而现在桌面和移动设备拥有不同的分辨率，即使是同样类型的设备，也可能需要做出不同的适配。所以仅仅依靠媒体类型（Media Type）已经无法满足时代的要求了。为了顺应这种需求，CSS 3新增了媒体查询（Media Query）功能。

一起来看一个简单的实例。

<link rel="stylesheet" href="small.css" media="screen and (max-width: 600px)">

通常是按照上面的方式引用一个外部的CSS样式表文件，那么在CSS样式中可以将上面的形式转成为CSS样式代码。

@media screen and (max-width: 600px) {

  /*相应的CSS样式代码*/

}

其实就是把<link>标签中所引用的外部CSS样式表文件中的CSS样式代码放在了@media screen and (max-width: 600px){…}的大括号之间。在上面的代码中可以看出媒体查询（Media Query）与CSS样式代码集合很相似，主要区别如下。