响应式布局之Media

最新推荐文章于 2024-06-07 19:37:27 发布

weixin_39214481

最新推荐文章于 2024-06-07 19:37:27 发布

阅读量140

点赞数

分类专栏：响应式

响应式专栏收录该内容

5 篇文章 0 订阅

订阅专栏

7.2 指定与介质相关的样式表

目前有两种方法可以为样式表指定媒体依赖关系：

使用@media或@import at-rules 从样式表中指定目标介质。

@import url（“fancyfonts.css”）屏幕;
@media print {
  / *打印样式表到这里* /
}

在文档语言中指定目标介质。例如，在HTML 4（[HTML4]）中，LINK元素上的“media”属性指定外部样式表的目标媒体：

<！DOCTYPE HTML PUBLIC“ -  // W3C // DTD HTML 4.01 // EN”>
<HTML>
   <HEAD>
      <TITLE>链接到目标媒体</ TITLE>
      <LINK REL =“stylesheet”TYPE =“text / css” 
	 MEDIA =“print，handheld”HREF =“foo.css”>
   </ HEAD>
   <BODY>
      <P>身体......
   </ BODY>
</ HTML>

7.2.1 @media规则

一个@media规则指定目标媒体类型的一组（由逗号分隔）的语句（由大括号分隔）。根据4.1.7“规则集，声明块和选择器”和4.2“处理解析错误的规则 ”，必须忽略无效语句。该@media结构允许在同一个样式表中各种媒体的样式表规则：

<span style="color:#000000">  @media print {
    body {font-size：10pt}
  }
  @media screen {
    body {font-size：13px}
  }
  @media screen，print {
    body {line-height：1.2}
  }
</span>

@media规则之外的样式规则适用于样式表适用的所有媒体类型。@media中的at-rules在CSS 2.2中无效。

7.3 认可的媒体类型

为CSS媒体类型选择的名称反映了相关属性有意义的目标设备。在以下CSS媒体类型列表中，媒体类型的名称是标准的，但描述是提供信息的。同样，每个属性的描述中的“媒体”字段是提供信息的。

所有：适用于所有设备。

点字：用于盲文触觉反馈设备。

压花：适用于分页盲文打印机。

手持：适用于手持设备（通常为小屏幕，带宽有限）。

打印：适用于分页材料和在打印预览模式下在屏幕上查看的文档。有关分页媒体特定格式问题的信息，请参阅分页媒体部分。

投影：用于预计演示，例如投影仪。有关分页媒体特定格式问题的信息，请参阅分页媒体部分。

屏幕：主要用于彩色电脑屏幕。

言语：用于语音合成器。注意：为此，CSS2有一个类似的媒体类型叫做'aural'。有关详细信息，请参阅听觉样式表的附录。

TTY：适用于使用固定间距字符网格的媒体（例如电视类型，终端或具有有限显示功能的便携式设备）。作者不应使用具有“tty”媒体类型的像素单元。

电视：适用于电视类设备（低分辨率，彩色，有限滚动屏幕，可用声音）。

媒体类型名称不区分大小写。在用户代理在呈现文档时只能支持一种媒体类型的意义上，媒体类型是互斥的。但是，用户代理可以在不同的画布上使用不同的媒体类型。例如，文档可以（同时）在一个画布上以“屏幕”模式显示，而在另一个画布上以“打印”模式显示。

请注意，多模式媒体类型仍然只是一种媒体类型。例如，'tv'媒体类型是一种多模式媒体类型，可以在视觉上和听觉上呈现单个画布。

具有未知媒体类型的@media和@import规则（仍然是有效标识符）被视为不存在未知媒体类型。如果@media / @ import规则包含格式错误的媒体类型（不是标识符），则该语句无效。

注意：媒体查询取代此错误处理。

例如，在以下代码段中，P元素上的规则适用于“屏幕”模式（即使“3D”媒体类型未知）。

@media screen，3D {
  P {颜色：绿色; }
}

注意。 CSS的未来更新可以扩展媒体类型列表。作者不应该依赖CSS规范尚未定义的媒体类型名称。

7.3.1 媒体组

本节内容丰富，不具备规范性。

每个CSS属性定义指定属性适用的媒体类型。由于属性通常适用于多种媒体类型，因此每个属性定义的“适用于媒体”部分列出媒体组而不是单个媒体类型。每个属性适用于其定义中列出的媒体组中的所有媒体类型。

CSS 2.2定义了以下媒体组：

连续或分页。
视觉，音频，语音，或触觉。
网格（用于字符网格设备）或位图。
交互式（用于允许用户交互的设备）或静态（用于不允许用户交互的设备）。
全部（包括所有媒体类型）

下表显示了媒体组与媒体类型之间的关系：

媒体组与媒体类型之间的关系
媒体类型	媒体组
	连续/寻呼	视频/音频/语音/触觉	格/位图	交互/静态
点字	连续	触	格	都
压花	分页	触	格	静态的
手持	都	视觉，音频，语音	都	都
打印	分页	视觉	位图	静态的
投影	分页	视觉	位图	互动
屏幕	连续	视觉，音频	位图	都
言语	连续	言语	N / A	都
TTY	连续	视觉	格	都
电视	都	视觉，音频	位图	都

weixin_39214481

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局之Media

7.2 指定与介质相关的样式表目前有两种方法可以为样式表指定媒体依赖关系：使用@media或@import at-rules 从样式表中指定目标介质。 @import url（“fancyfonts.css”）屏幕;@media print { / *打印样式表到这里* /} 在文档语言中指定目标介质。例如，在HTML 4（[HTML4]）中，LINK元素上的“med...
复制链接

扫一扫