HTML 标签的 media 属性

media 属性用于为不同的媒介类型规定不同的样式。可以用于, , , ,

实例

针对两种不同媒介类型的两种不同的样式（计算机屏幕和打印）：

<html>
<head>
<style type="text/css">
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>
<style type="text/css" media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>
<h1>标题 1</h1>
<p>一个段落。</p>
</body>
</html>

运行一下

定义和用法

media 属性用于为不同的媒介类型规定不同的样式。可以用于<a>, <area>, <link>, <source>, <style>等标签。

提示：如需在一个 style 元素中定义一个以上的媒介类型，请使用逗号分隔的列表。

浏览器支持

所有主流浏览器都支持 media 属性的 "screen"、"print" 以及 "all" 值。

提示：Opera 同时支持 "handheld" 值。

语法

<style media="value">

属性值

值	描述
screen	计算机屏幕（默认值）。
tty	电传打字机以及使用等宽字符网格的类似媒介。
tv	电视类型设备（低分辨率、有限的屏幕翻滚能力）。
projection	放映机。
handheld	手持设备（小屏幕、有限的带宽）。
print	打印预览模式 / 打印页。
braille	盲人用点字法反馈设备。
aural	语音合成器。
all	适合所有设备。

更多实例

area 的 media 属性用法

<img src="/images/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm" media="screen and (min-color-index:256)">
</map>

source 的 media 属性用法

<source src="movie.ogg" type="video/ogg"
media="screen and (min-width:320px)">

style 的 media 属性用法

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

HTML 标签的 media 属性

实例

定义和用法

浏览器支持

语法

属性值

更多实例

分类导航