再谈css媒体介质查询技术

以前谈论过的东东:CSS3 媒体查询 视频教程

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

语法

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

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

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

逻辑操作符

你可以通过使用逻辑操作符,包括 notandonly 组成复杂的媒体查询。

同时,你可以使用多重媒体查询,将其用逗号分隔,组成一个媒体查询表,如果在一组查询中,有一个查询的结果为真,那么相关联的样式表就会生效。这相当于逻辑操作符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>
		它等于下面的语句:
		
		@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 文档相冲突。如果你的媒体特点没有定义值,如果媒体特点的值非零,那么这个表达式的结果将会是真。

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

颜色

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

表示输出设备的每种色彩的位数。如果设备不是彩色的设备,那么这个值将总是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 的设备中使用相应的样式。

设备高度

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

描述输出设备的高度(整个屏幕或者页面,而不仅仅是渲染的区域,类似于整个文档窗口)。

例子

当屏幕的宽度小于800像素是,应用样式:

		<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
		

设备宽度(device-width)

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

描述输出设备的宽度(整个屏幕或者页面,而不仅仅是渲染的区域,类似于整个文档窗口)。

grid

Value: <integer>
Media: all
Accepts min/max prefixes: no

检索输出设备是否为网格设备(grid device)或者位图装置(bitmap device),如果是基于栅格的设备,(如 TTY 终端 或者只有一种字体的手机),这个属性值将会是1,否则为0;

例子

下面的代码将在只能显示15个字或者更少的手持设备上显示:

		@media handheld and (grid) and (max-width: 15em) { ... }
		

注意:“em”单位对栅格设备有特殊的意义;因为“em”不可能被定义为绝对的宽度,1em 被假设为横向宽度/纵向高度为一个单元的格子。

高度(height)

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

height媒体特点描述了输出设备的可视区域(及页面的可视区域或者分页介质的高度)。

注意:当用户改变窗口大小时,firefox会基于媒体介质查询,通过高度和宽度的特点,来转换相应的样式表。

单色显示(monochrome)

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

该属性表示每个像素的bit数。如果设备不是单色,那这个设备的属性值是0.

例子

下面的样式将会被应用到所有单色设备

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

将样式表运用在至少每个像素点有8bits 的单色设备上:

		@media all and (min-monochrome: 8) { ... }
		

方向(orientation)

Value: landscape | portrait
Media: visual
Accepts min/max prefixes: no

用来确定设备的显示模式是横屏(显示的宽度大于高度)还是竖屏(显示的高度大于宽度)

例子

针对竖屏显示的样式表:

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

分辨率(resolution)

Value: <resolution>
Media: bitmap
Accepts min/max prefixes: yes

用来表示输出设备的分辨率(像素密度)。像素可能会被定义为一英尺有多少个点(dpi)或者一厘米有多少个点(dpcm)。

例子

下面的代码表示将会对分辨率大于每英尺大于300点的设备应用样式:

		@media print and (min-resolution: 300dpi) { ... }
		

扫描(scan)

Value: progressive | interlace
Media: tv
Accepts min/max prefixes: no

用来定义电视输出设备的扫描方式。

例子

下面的代码将会被用在隔行扫描的电视设备上面:

		@media tv and (scan: progressive) { ... }
		

宽度(width)

Value: <length>
Media: visual , tactile
Accepts min/max prefixes: yes
width媒体夜店用来描述输出设备的渲染的区域(如文档窗口的宽度,或者打印机的页面宽度)。

注意:当用户改变窗口大小时,firefox会基于媒体介质查询,通过高度和宽度的特点,来转换相应的样式表。

例子

如果你想针对手持设备或者显设备的宽度大于20em时,你可以使用下面的语句:

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

下面的媒体查询语句将针对打印媒体的宽度大于8.5英尺时使用:

		<link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" />
		

下面的样式表将在可视区域的宽度介于500 和 800 像素之间时使用:

		@media screen and (min-width: 500px) and (max-width: 800px) { ... }
		

Mozilla 定义的媒体特点

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

每个css像素在设备中占用的像素点。

注意:这个媒体特点在 webkit 的浏览器中也有对应 -webkit-device-pixel-ratio.在 Gecko 浏览器中,最大最小值被用下面的方式命名 min--moz-device-pixel-ratio 和 max--moz-device-pixel-ratio ,但是在 webkkit 内核中,是下面的样子 -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio

此处请阅读原文,我们仅仅介绍一下 -moz-device-pixel-ratio

-moz-device-pixel-ratio

浏览器兼容性

桌面设备

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 3.5 (1.9.1) 9.0 9.5 4
grid ? -- (grid media type is not supported) ? ? ?
resolution ? 3.5 (1.9.1)
supports <integer>
values;
8.0 (8.0)
supports <number>
values, as per the spec.
? ? ?
scan ? -- (tv media type is not supported) ? ? ?

移动设备

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) ? (Yes) (Yes)

原文地址:CSS media queries