其实在CSS2的规范就提出了@media的规则，就是根据不同的设备使用不同的css样式。遗憾的是很多设备媒介没有得到支持。

所以在CSS3中，关于媒体查询的含义发生了改变，不再是查看设备的类型，而是查看设备的功能。

媒体查询主要可以查看设备的功能如下：

• 设备视口的宽度和高度

• 设备本身的宽度和高度。

• 横屏竖屏（比如手机，平板是横屏还是竖屏）

• 解析度

因为IE9都支持media queries，所以利用媒体查询完成响应式设计得到了很好的应用。

一、语法结构

由媒体类型和表达式构成，可以有多个表达式，表达式可以得到真或假。媒体类型和表达式之间都要通过and来连接。

@media not|only mediatype and (expressions) {
  CSS-Code;
}

当媒体类型匹配且表达式都为真的时候，就会执行对应的css样式。

除了在页面内部直接使用上面的语法之外，还可以为不同的媒体类型指定不同的外部css样式表。

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

比如：

<link rel="stylesheet" type="text/css" href="b.css" media="screen  and (min-width: 768px) and (max-width: 979px)">

二、媒体类型

• all   所有媒体类型设备

• screen  用于屏幕，比如电脑屏幕、平板、智能手机等

• print    用于打印设备

• speech   用于“读取”页面内容的屏幕阅读器，比如为盲人设计的应用。

三、常用的表达式

@media screen and (min-width: 375px){ }

min-width: 480px ，表示当屏幕的宽度大于等于375px的时候，使用内部的样式。

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

max-width: 480px，表示当屏幕的宽度小于等于375px的时候，使用内部的样式。

@media screen and (min-width: 480px) and (max-width:768px){ }

min-width: 480px and max-width: 768px，表示屏幕的宽度480px<=screenwidth<=768px。

@media screen and (max-device-width: 1024px) and (orientation: landscape){ }

ipad横屏，max-device-width指的是设备的最大宽度。

@media screen and (max-device-width: 768px) and (orientation: portrait) { }

ipad竖屏，可以查询设备的方向。

这里有很多关于媒体查询的断点和媒体类型设置，可以直接根据你的需要来用：

CSS3 Media Queries 片段

当然还有很多响应式框架，比如bootstrap就是很成熟的基于移动端响应式设置的框架。

四、其他注意事项

IE8以下的版本不支持媒体查询，可以使用css3-mediaqueries.js来兼容。

<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>

需要在文档头部添加如下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这段代码如果不写，那么浏览器会把网页按照pc端那样的全部显示，不会产生响应式的变化，文字变得很小很小。所以这段声明是让浏览器解析网页的宽度就是设备的宽度，而且不可以缩放。

最后，媒体查询是基于有一份完整的css文档之下所做的调整，所以要基于css自身的层叠关系，不要又在媒体查询那里把所有样式全部写一遍，只需要写出要覆盖原样式的新样式即可。