再谈css媒体介质查询技术

css3 增强了媒体样式表的支持，让样式表更精准。一个媒体介质查询有媒体类型和至少一个媒体特点表达式组成，比如宽、高、和颜色等。媒体介质查询可以在不改变内容的前提下，根据输出设备的范围，精准的呈现。

语法

媒体查询有媒体类型和一个或多个表达式组成，包括媒体特性，这样就组成了一个 真 或 假 的表达式。如果媒体查询语句中的媒体类型和媒体特性都匹配的话，结果及为真。

如果媒体查询的结果为真，形影的样本规则生效。

如果媒体查询中 既没有使用 not 也没有使用 only, 媒体类型也是可选的，这样将会被认为是 all.

逻辑操作符

你可以通过使用逻辑操作符，包括 not、and、only 组成复杂的媒体查询。

同时，你可以使用多重媒体查询，将其用逗号分隔，组成一个媒体查询表，如果在一组查询中，有一个查询的结果为真，那么相关联的样式表就会生效。这相当于逻辑操作符or。

关键字 not 将会与媒体查询结果相反；比如，“all and (not color)” 因为媒体类型其将只在黑白的访问设备上显示。

我们可以使用 only 关键字来针对不支持媒体查询技术的老浏览器隐藏相应的样式：

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

操作符优先级

操作符 not的优先级很低。比如，在下面的代码中，not会被最后计算：

		@media not all and (-moz-windows-compositor) { ... }
		

这就意味着，这条查询语句的结果和下面一样：

		@media not (all and (-moz-windows-compositor)) { ... }
		

或者这样：

			@media (not all) and (-moz-windows-compositor) { ... }
			

像另一个例子，请看下面的查询语句：

		@media not screen and (color), print and (color)
		[/css]
		</p>
		<p>
		它等于下面的语句：
		1
		@media (not (screen and (color))), print and (color)
		

Pseudo-BNF（你喜欢的那些事情）

		media_query_list:  [,  ]*
		media_query: [[only | not]?  [ and  ]*]
		  |  [ and  ]*
		expression: (  [: ]? )
		media_type: all | aural | braille | handheld | print |
		  projection | screen | tty | tv | embossed
		media_feature: width | min-width | max-width
		  | height | min-height | max-height
		  | device-width | min-device-width | max-device-width
		  | device-height | min-device-height | max-device-height
		  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
		  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
		  | color | min-color | max-color
		  | color-index | min-color-index | max-color-index
		  | monochrome | min-monochrome | max-monochrome
		  | resolution | min-resolution | max-resolution
		  | scan | grid
		  

需要注意的是，媒体查询语句对大小写是敏感的，如果使用了未知的媒体类型，这个查询的结果将总是假。

注意，媒体查询的表达式必须用括号；否则将会产生错误。

媒体特点

大多数媒体特点将会加上一个前缀“min-” 或者 "max-" 来表示“大于或等于” 或者 “小于或等于”的限制条件。这里禁止使用 ">" 或者 "<" 符合，因为这样将会和 html 或者 XML 文档相冲突。如果你的媒体特点没有定义值，如果媒体特点的值非零，那么这个表达式的结果将会是真。

注意：如果媒体特点在设备运行的浏览器上不支持，表达式的结果总是假。例如，媒体查询的款高比率在盲人设备上结果总是假。

颜色

表示输出设备的每种色彩的位数。如果设备不是彩色的设备，那么这个值将总是0.

如果出处设备的每种颜色组成的位数不同，将会使用最小的值。例如，如果蓝色使用5位，绿色使用6位，那么设备将会使用5位。如果设备使用索引色，每种颜色的在颜色表中的最小位数将会被使用。

例子

对所有彩色设备使用样式表：

@media all and (color) { ... }

针对最少4位颜色的设备使用样式表：

			@media all and (min-color: 4) { ... }
			

颜色索引

Value: <integer>
Media: visual
Accepts min/max prefixes: yes

根据设备输出的颜色表来匹配。

例子

对所有彩色设备使用样式表：

@media all and (color-index) { ... }

针对至少有256索引色的设备使用下面的样式表：

		<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
		

宽高比

Value: <ratio>
Media: visual , tactile
Accepts min/max prefixes: yes

用来描述输出设备的目标显示区域的宽高比。这个值由两个正值，并通过“/”分开。这将会表现水平（第一个值）和垂直（第二个值）的比率。

		@media screen and (min-aspect-ratio: 1/1) { ... }
		

这样将会在比率大于1：1的显示区域中应用样式。

设备宽高比

Value: <ratio>
Media: visual , tactile
Accepts min/max prefixes: yes

用来描述输出设备的款高比。这个值由两个正值，并通过“/”分开。这将会表现水平（第一个值）和垂直（第二个值）的比率。

例子

下面的语句将会针对宽屏显示器显示：

		@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
		

上面的语句将会在比率为 19：9 或者 16：10 的设备中使用相应的样式。

未完待续，原文地址： CSS media queries