CSS详解(二)— —媒体查询(1)

在HTML4中，媒体样式表的写法是：

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">

<link rel="stylesheet" type="text/css" media="print" href="serif.css">

在CSS3中，媒体查询（Media Queries）扩展了媒体类型功能，支持更为精准的样式表标签。媒体查询由媒体类型和若干表达式组成，表达式负责检查特定媒体特性的条件。通过使用媒体查询，我们不需要修改网页内容，就可以使文档显示适应特定的输出设备。媒体查询是一个逻辑表达式，其结果为真（true）或假（false）。如果媒体查询的媒体类型与用户客户端所在设备媒体类型相匹配，并且媒体查询的所有表达式都为真，那么它就返回真。

下面是一些媒体查询例子：

<-- !应用于支持指定特性（彩色）的特殊媒体类型('screen')-->

<link rel="stylesheet" media="screen and (color)" href="example.css" />

<!--写在CSS的@import-rule语句中 -->

@import url(color.css) screen and (color);

媒体查询有一种适用所有媒体类型的简写语法，其中关键词all可以省略（后面的and也可以省略）。例如，下面两条语句是相同的：

@media (orientation: portrait) { … }

@media all and (orientation: portrait) { … }

设计者和开发者可以使用这种方法创建出满足特殊需求的复杂查询：

@media all and (max-width: 698px) and (min-width: 520px), (min-width: 1150px) {

  body {

    background: #ccc;

  }

}

 

 

在link标签和样式表中都可以写媒体查询，在link中仅仅只能写些简单的，如指定媒体类型为tv、print、screen等，而在样式表中可以写满足特殊要求的复杂查询，如上面红色油漆桶涂红的部分。

 

 

媒体查询的一个简单示例可能如下所示：

<link href="css/phone.css" rel="stylesheet" type="text/css"
media="only screen and (max-width: 400px)" >

在此示例中，将媒体查询添加到了<link>标记中。在后面将会看到，您也可以在样式表中使用媒体查询。media属性是该查询实际所在的地方。这个示例如下所示：

only screen and (max-width: 400px)

该示例的含义应该很明显：仅将此样式表应用到拥有屏幕的设备，并且仅在浏览器窗口的宽度不超过400像素时应用。您可以从文件名phone.css上看出，这个特定的查询是为电话样式设计的。现在您已看到了一个示例，让我们更详细分析一下媒体查询，以及您可用于控制在何处应用样式的设备功能。

媒体查询支持和功能

媒体查询支持Internet Explorer (IE) 9及更高版本、Firefox 3.5及更高版本、Safari 3及更高版本、Opera 7及更高版本，以及大部分现代智能电话和其他基于屏幕的设备。尽管IE的早期版本不支持媒体查询，但您可以（而且应该）从现在开始使用它们。处理早期浏览器的策略将在本文后面探讨。表1列出了可用于媒体查询中的设备功能。

表1. 用于设置媒体查询中的条件的媒体功能

功能	值	最大/最小值	描述
width	长度	是	显示区域的宽度
height	长度	是	显示区域的高度
device-width	长度	是	设备的宽度
device-height	长度	是	设备的高度
orientation	portrait或landscape	否	设备的方向
aspect-ratio	高宽比（宽/高）	是	设备的宽高比，使用由1个斜杠分开的两个整数表示（比如16/9）
device-aspect-ratio	高宽比（宽/高）	是	设备宽度与设备高度的比率
color	整数	是	每种颜色成分的位数（如果不是颜色，该值为0）
color-index	整数	是	输出设备的颜色查找表中的项数
monochrome	整数	是	单色镇缓冲区中每像素的位数（如果不是单色，该值为0）
resolution	分辨率	是	输出设备的像素密度，表示为整数后跟dpi（每英寸点数）或dpcm（每厘米点数）
scan	progressive或interlace	否	TV设备使用的扫描过程
grid	0或1	否	如果设置为1，设备基于网格，比如电传类型的终端或仅有一种固定字体的电话显示设备（所有其他设备均为0）

表1中的前5项功能（width、height、device-width、device-height和orientation）是最有用的。您可以为大部分功能添加min-和max-作为前缀，以表示最小和最大值，比如min-width和max-width。表1中的“最大值/最小值”列表是哪些功能可通过此方式修改。