Media types

最新推荐文章于 2023-09-03 00:03:18 发布

weixin_34216107

最新推荐文章于 2023-09-03 00:03:18 发布

阅读量131

点赞数

文章标签：人工智能

原文链接：https://my.oschina.net/hmj/blog/68458

版权

为什么80%的码农都做不了架构师？>>>

1.Media types简介

样式表的最大特点之一是可以指定一篇文档(a document)在不同的媒体类型上的显示效果，如电脑屏幕，纸张，语音合成器，盲文设备，等等。

某些CSS属性是为特定的媒体设置的（如： 'page-break-before' 属性只能应用于paged Media）。然而，有时候不同的媒体类型可能共享样式表的同一个样式属性，只是各自需要不同的属性值。例如，font-size属性可以同时应用在电脑屏幕(scree)和打印设备(print media)上.这两类设备类型十分不同，因此需要不同的值，在电脑屏幕上的字体可能比纸质上的字体要大一些。因此有必要支持一个样式表，或一个样式表的某一块区域，只适应与某些特定的设备。

2.说明依赖于设备类型的样式表

包括两种方式来说明样式依赖的设备类型

利用@media 和 @import 指令指定样式表的目标设备类型

@import  url("fancyfonts.css") screen;
@media  print {
 /* style sheet for print goes here */
}

在文档语言内部指定目标媒体类型，如在HTML4中通过link元素的meta属性指定样式表的目标类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
     <HEAD>
          <TITLE>Link to a target medium</TITLE>
           <LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">
     </HEAD>
     <BODY>
          <P>The body...
     </BODY>
 </HTML>

3.@media 规则

@media 规则标识了一个样式声明集合所适应的目标媒体类型（不同的媒体类型之间用","隔开）.非法的样式声明将直接被忽略掉。@media 构造允许在同一个样式表中指定不同媒体类型的样式。如：

@media  print {
   body { font-size: 10pt }
 }
 @media  screen {
    body { font-size: 13px }
 }
 @media  screen, print {
    body { line-height: 1.2 }
 }
 div{
    margin:0 auto;
 }

在上例子中@media 规则之外的样式声明该样式应用于所有媒体类型。在@media 内部的样式需要被css2.1验证。

4.可识别媒体类型（Recognized media types）

标识目标设备类型的CSS媒体类型名称，反映了哪些相关的样式属性有对其意义。以下的媒体类型名称是标准的，但其描述是可扩展的。

all 适用于所有媒体
braille 适用于盲文设备
handheld 手持设备（通常是小屏幕，受限带宽）
print 纸质或打印预览模式下的文档
embossed 盲文打印机
projection 投影设备，如演示文档
screen 彩色电脑显示屏
tty 语音合成器
tv 电视

媒体类型的名称是大小写敏感的。

在用户代理只支持一种媒体类型渲染文档的情况下，不同的媒体类型样式声明是相互排斥的。然而，用户代理也可以将不同的媒体类型样式在不同的画布上进行渲染。如，在同一个用户代理上，一篇文档可以在一个画布上用screen模式下显示，也可以在另一个画布上用print模式显示。

注意多媒体类型仍然仅是但媒体类型，如tv类型是一个多媒体类型，可以将视觉和听觉在一个画布上进行渲染。

@media 和@import 规则对于无法识别的媒体类型（非有效标识符）来说，将以未知媒体类型为呈现一样对待。如果@media 和@import 规则包含的是不完整的媒体类型，则其对应的样式是不合法的。

5.Media group

每一个CSS属性定于都指定了其所应用的媒体类型。由于有些样式属性要应用在多个媒体类型上，为了不单独在每个媒体类型上单独对该样式声明，包含了一组媒体类型的媒体组（Media Group）将达到更好的效果。

CSS2.1中定义了以下几种媒体组：

continuous/paged
visual/audio/speech/tactile
grid/bitmap
interactive/static
all

media types 与media group的关系表

Media Types	Media Groups
	continuous/paged	visual/audio/speech/tactile	grid/bitmap	interactive/static
braille	continuous	tactile	grid	both
embossed	paged	tactile	grid	static
handheld	both	visual, audio, speech	both	both
print	paged	visual	bitmap	static
projection	paged	visual	bitmap	interactive
screen	continuous	visual, audio	bitmap	both
speech	continuous	speech	N/A	both
tty	continuous	visual	grid	both
tv	both	visual, audio	bitmap	both