HTML <area> 标签media属性

<area>标签media属性定义和用法

media属性指定链接文档针对哪些媒体/设备进行优化。
此属性用于指定目标URL是为特殊设备（如iPhone），语音或打印介质设计的。
此属性可以接受多个值。
仅在存在href属性时使用。

注意：此属性纯粹是建议性的。

<area>标签media属性浏览器支持

Edge/IE	Chrome	FireFox	Safari	Opera

支持	支持	支持	支持	支持

HTML4.01和HTML5之间的差异

media属性是HTML5中的新功能。

<area>标签media属性语法

<area>标签media属性实例

<img src="/images/j1.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="53,46,105,123" alt="酒壶" href="/jc_script/about_jiuhu.html" media="screen and (min-color-index:256)">
</map>

尝试一下

<a>标签media可能的操作符

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

<area>标签media属性的设备

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

<area>标签media属性的值

值	描述
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(设备宽度:500px)"
device-height	指定目标显示/纸张的高度。可以使用“min-”和“max-”前缀。例如:media="screen and(设备高度:500px)"
orientation	指定目标显示/纸张的方向。可能的值:“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	指定目标显示器可以处理的颜色数。可以使用“min-”和“max-”前缀。例子:media="screen and (min-color index:256)"
monochrome	指定单色帧缓冲区中每个像素的比特数。可以使用“min-”和“max-”前缀。例如:media="screen and(单色:2)"
resolution	指定目标显示器/纸张的像素密度(dpi或dpcm)。可以使用“min-”和“max-”前缀。示例:media="print and (resolution:300dpi)"
scan	指定电视显示器的扫描方法。可能的值是“progressive”和“interlace”。例如:media="tv and (scan:interlace)"
grid	指定输出设备是网格还是位图。网格的可能值为“1”，否则为“0”。示例:media="handheld and (grid:1)"