HTML area media properties
Examples
With clickable image map area:
<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.htm" media="screen and (min-color-index:256)">
</map>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm" media="screen and (min-color-index:256)">
</map>
try it"
Browser Support
All major browsers support media properties
Definition and Usage
media attribute specifies the target URL will be displayed on any device.
The property is used with the specified URL is displayed on the specified device (eg iPhone), audio or print media.
This attribute can accept multiple values.
Only use the href attribute is required media properties.
Differences between HTML 4.01 and HTML5
The media attribute is new in HTML5.
grammar
<area media="value">
Possible operator
| 值 | 描述 |
|---|---|
| and | 指定 AND 操作符 |
| not | 指定 NOT 操作符 |
| , | 指定 OR 操作符 |
equipment
| 值 | 描述 |
|---|---|
| all | 默认。适应所有设备。 |
| aural | 语音合成器 |
| braille | 盲文反馈设备 |
| handheld | 手持设备（小屏幕，有限的带宽） |
| projection | 投影仪 |
| 打印预览模式/打印页数 | |
| screen | 电脑屏幕 |
| tty | 电传打字机和类似使用固定间距字符网格的介质 |
| tv | 电视类型设备（分辨率低，滚动能力有限） |
value
| 值 | 描述 |
|---|---|
| width | 指定的显示区域的宽度。 通常使用 "min-" 和 "max-" 前缀。 实例: media="screen and (min-width:500px)" |
| height | 指定的显示区域的高度。 通常使用 "min-" 和 "max-" 前缀。 实例: media="screen and (max-height:700px)" |
| device-width | 指定目标显示/打印纸的宽度 通常使用 "min-" 和 "max-" 前缀。 实例: media="screen and (device-width:500px)" |
| device-height | 指定目标显示/打印纸的高度 通常使用 "min-" 和 "max-" 前缀。 实例: media="screen and (device-height:500px)" |
| 方向 | 指定目标显示/纸的方向。 可能值: "portrait" 或 "landscape" 实例: media="all and (orientation: landscape)" |
| aspect-ratio | 指定的目标的显示区域的宽度/高度比例。 通常使用 "min-" 和 "max-" 前缀。 实例: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | 指定的目标的显示区域的设备宽度/设备高度比例。 通常使用 "min-" 和 "max-" 前缀。 实例: media="screen and (aspect-ratio:16/9)" |
| color | 指定目标显示每个像素颜色的位数。 通常使用 "min-" 和 "max-" 前缀。 实例: media="screen and (color:3)" |
| color-index | Specifies the number of colors the target display can handle. 通常使用 "min-" 和 "max-" 前缀。 实例: media="screen and (min-color-index:256)" |
| monochrome | 指定在一个单色的帧缓冲器的像素位数。 通常使用 "min-" 和 "max-" 前缀。 实例: media="screen and (monochrome:2)" |
| resolution | 指定目标显示/纸的像素密度（DPI或DPCM）。 通常使用 "min-" 和 "max-" 前缀。 实例: media="print and (resolution:300dpi)" |
| scan | 指定一个电视显示屏的扫描方法。 可能值是 "progressive" 和 "interlace". 实例: media="tv and (scan:interlace)" |
| grid | 指定输出设备是电网或位图 grid的值为 "1", 其他的为 "0" 实例: media="handheld and (grid:1)" |