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