media属性和媒体类型

一、media属性

当设定样式的时候，可以指定此样式应用于何种媒体，例如：

<link rel="stylesheet" href="basic.css" type="text/css" media="screen" />

media属性为可选属性，用于指定应用此样式表的介质或媒体。允许的值有：

• screen (缺省值)，用于文档在屏幕媒体的呈现，如电脑显示器，所有 web 浏览器都运行于这样的系统屏幕媒体用户代理；
• print， 应用于不透明的页面材料，以及文档在打印预览的状态。；
• projection，应用于投影演示，例如投影仪或打印到透明胶片；
• speech， 应用于屏幕阅读器等发声设备；
• braille，应用于盲文触摸式反馈设备；
• embossed，用于打印的盲人印刷设 备；
• handheld，用于手持设备，如个人数码助理或可上网的手机；
• tty，应用于使用固定字符宽栅格的媒介，如 电传，终端，或显示能力有限的手提设备；
• tv，应用于电视类型的设备（低分辨率，彩色，屏幕滚动能力有限，有声音）；
• all， 所有输出设备。

 

注意：媒体类型名是大小写敏感的。

目前的 web 浏览器支持最广的是all、screen和 print。

可以针对不同的媒体类型设定不同的CSS文件，例如针对打印机设定打印用的CSS：

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

如果要指定多个媒体，则关键字之间用英文逗号“，”隔开，例如：

<link rel="stylesheet" href="basic.css" type="text/css" media="screen, print" />

某些CSS属性只能在特定的媒体类型内使用，例如“’page-break-before’”只能在打印机这种可以分页的媒体设备上使用。而属性的 某些值在不同的媒体设备上表现可能不同，例如“font-size”设定字体的大小，在计算机显示器和打印机上有可能大小并不一样。

二、媒体类型

制作者可以决定在不同的媒体上文档应该如何呈现：屏幕上，纸面上，语音合成器或者盲文设备，等等。

某些CSS属性是只为特定的媒体而设计，如cue-before属性是为语音用户端设计的。

有时候不同媒体类型的样式表可以共享一个属性，不过对于这个属性可能要赋予不同的值。

例如，字体尺寸font-size属性用于屏幕和打印媒体。不过这两个媒体差别很大，因此对于共同的属性需要不同的值——在计算机屏幕上的文档一般 要用比纸面上的文档大一些的字体。

再例如，屏幕上无衬线字体要容易阅读一些，而在纸面上有衬线的字体要容易阅读一些。基于这些原因，有必要声明一个样式表（或样式表中的一段）适用于 特定的媒体类型。

1.指定媒体相关的样式表

目前有两个方法来指定样式表的媒体相关性：

1)在样式表中通过“@media”规则或“@import”规则来指定目标媒体。

例如：

@import url("loudvoice.css") aural;

@media print { 一些样式规则 }

一个“@media”规则以一系列规则（以花括号分割）来指定目标媒体类型（以逗号分割）。@media结构允许不同媒体的样式规则存在于同一样式 表中：

@media print {

  body { font-size: 10pt }

}

@media screen {

  body { font-size: 12pt }

}

@media screen, print {

  body { line-height: 1.2 }

}

2) 在文档语言中指定目标媒体。

使用link的“media”属性指定一个外部样式表的目标媒体。

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

<link rel="stylesheet" href="basic.css" type="text/css" media="screen, print" />

2.媒体组

虽然有的CSS属性只能在某个类型的媒体中使用，但是多数的CSS属性通常可以适用于若干个媒体，因此在对CSS属性详细介绍的定义列表中，有“媒 体”一项，其中列出的是媒体组而不是单一的媒体类型。每一个属性适用于这个媒体组中包含的所有媒体类型。

CSS 2.1有如下几种分组方式：

• 连续媒体（continuous，例如显示器）或页面媒体（paged，例如打印机）；
• 视觉（visual）、音频 （audio）、语音（speech）或触觉（tactile）；
• 栅格（grid，字符栅格设备）或者位图（bitmap）；
• 交 互（interactive，对于允许用户交互的设备）或静态（static，不支持交互的设备)。
• 包含所有的媒体类型（all）。

以上几种不同分类方式的媒体组，其包含的媒体类型如下表所示。

CSS 2.1 媒体类型与媒体组对照表

媒体类型	媒体组
	连续/页面	视觉/音频/语音/触觉	栅格/位图	交互/静态
braille	连续	触觉	栅格	两者全是
embossed	页面	触觉	栅格	静态
handheld	两者全是	视觉，音频，语音	两者全是	两者全是
print	页面	视觉	位图	静态
projection	页面	视觉	位图	交互
screen	连续	视觉，音频	位图	两者全是
speech	连续	语音	不适用	两者全是
tty	连续	视觉	栅格	两者全是
tv	两者全是	视觉，音频	位图	两者全是
媒体类型	媒体组

例如对字体样式（font-style）属性的定义列表如下：

语法：font-style : normal | italic | oblique | inherit
说明：…………
初始值：normal
继承性：继承
适用于：所有元素
媒体：视觉
计算值：同指定值

其中“媒体：视觉”一项，表示其可以实用于表3-1中属于“视觉”媒体组的那些媒体类型，如 “screen”和“print”等。

原文：http://www.ddcat.net/blog/?p=1291