CSS媒体查询

CSS2引入媒体类型

该@media规则，在CSS2推出，使得它可以定义不同的媒体类型的不同样式规则。

例子：你可以有一组样式规则为计算机屏幕，一个用于打印机，一个用于手持设备，一个用于电视型装置，并依此类推。

不幸的是，这些媒体类型从未设备，使其比打印介质类型等得到了很多的支持。

CSS3推出媒体查询

在CSS3媒体查询扩展CSS2媒体类型的想法：与其找一个类型的设备，他们看的设备的能力。

媒体查询可以用于检查很多东西，比如：

• 宽度与视口高度
• 宽度和装置的高度
• 方向（是平板电脑/手机横向或纵向模式？）
• 解析度

使用媒体查询是一个定制的样式表传递到平板电脑，iPhone，和Android的流行技术。

浏览器支持

在表中的数字规定，完全支持@media规则的第一个浏览器版本。

媒体查询语法

媒体查询由媒体类型，并且可以包含一个或多个表达式，它解析为true或false。

如果指定的媒体类型匹配时，正被显示在文件的设备的类型，并在媒体查询所有表达式为真查询的结果为真。 当媒体查询为真，相应的样式表或样式规则应用，按照正常的级联规则。

除非你使用没有或者只有运营商，媒体类型是可选的， all类型将被暗示。

您也可以有不同的媒体不同的样式表：

CSS3媒体类型

媒体查询简单的例子

使用媒体查询的一种方法是有一个替代的CSS部分正确的样式表内。

下面的例子改变background-color ，以浅绿，如果视口是480像素或更宽（如果视口小于480像素， background-color将是粉红色）：

下面的例子说明会浮到页面左边的菜单，如果视口480像素或更宽（如果视口小于480像素，菜单将在内容的顶部）：

CSS3 @media参考

对于所有的媒体类型和功能/表达式完整的概述，请看@media在我们的参考CSS规则。