HTML Reference Manual

HTML Tag Reference

HTML: <area> media attribute

media属性指定目标URL针对哪种媒体/Devices are optimized, this attribute is used to specify that the URL is designed for special devices (such as iPhone), voice, or print media. This attribute can accept multiple values.

　HTML <area> tag

Online Example

Image map with clickable areas:

Example

<!DOCTYPE html>
<html>
<title>HTML: <area> media attribute　-　Basic Tutorial Website　oldtoolbag.com</title>
<body>
<p>Click on the sun to view it up close</p>
<img src="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.html" media="screen and (min-color-index:256)">
</map>
</body>
</html>

测试看看 ‹/›

浏览器兼容性

IEFirefoxOperaChromeSafari

所有主流浏览器都支持 media 属性

定义和用法

media属性指定目标URL针对哪种媒体/设备进行了优化。
此属性用于指定URL是为特殊设备（例如iPhone），语音或印刷媒体设计的。
该属性可以接受多个值。
仅当存在href属性时使用。
注意：此属性纯粹是建议性的。

HTML 4.01 与 HTML5之间的差异

media属性是HTML5中的新增属性。

语法

<area 媒体="值>

可能的操作符

值	描述
and	指定 AND 操作符
not	指定 NOT 操作符
,	指定 OR 操作符

设备

值	描述
all	默认。适应所有设备。
aural	语音合成器
braille	盲文反馈设备
handheld	手持设备（小屏幕，有限的带宽）
projection	投影仪
print	打印预览模式/打印页数
screen	电脑屏幕
tty	电传打字机和类似使用固定间距字符网格的介质
tv	电视类型设备（分辨率低，滚动能力有限）

值

值	描述
宽度	指定的显示区域的宽度。 Usually use "min-" and "max-" prefix. Example: media="screen and (min-宽度:500px)"
高度	指定的显示区域的高度。 Usually use "min-" and "max-" prefix. 示例: 媒体="screen and (max-高度:700px)"
设备-宽度	Specify the target display/打印纸的宽度 Usually use "min-" and "max-" prefix. 示例: 媒体="screen and (device-宽度:500px)"
设备-高度	Specify the target display/打印纸的高度 Usually use "min-" and "max-" prefix. 示例: 媒体="screen and (device-高度:500px)"
方向	Specify the target display/纸张的方向。可能值: "portrait" 或 "landscape" 示例: 媒体="all and (orientation: landscape)"
比例-比率	指定的目标的显示区域的宽度/高度比例。 Usually use "min-" and "max-" prefix. 示例: 媒体="screen and (aspect-比率:16/9)"
设备-比例-比率	指定的目标的显示区域的设备宽度/设备高度比例。 Usually use "min-" and "max-" prefix. 示例: 媒体="screen and (aspect-比率:16/9)"
color	指定目标显示每个像素颜色的位数。 Usually use "min-" and "max-" prefix. 示例: 媒体="screen and (color:3)"
color-索引	指定目标显示可处理的颜色数量。 Usually use "min-" and "max-" prefix. Example: media="screen and (min-color-index:256)"
monochrome	Specify the number of bits per pixel in a monochrome frame buffer. Usually use "min-" and "max-" prefix. Example: media="screen and (monochrome:2)"
resolution	Specify the target display/Paper pixel density (DPI or DPCM). Usually use "min-" and "max-" prefix. Example: media="print and (resolution:300dpi"
scan	Specify the scanning method for a television display. Possible values are "progressive" and "interlace". Example: media="tv and (scan:interlace)"
grid	Specify the output device is a grid or bitmap grid value is "1", the others are "0" Example: media="handheld and (grid:1)"

　HTML <area> tag

HTML: <template> tag