HTML <link> 标签media属性

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

media属性指定针对目标资源优化的媒体/设备。
此属性主要与CSS样式表一起使用，以指定不同媒体类型的不同样式。
media属性可以接受多个值。

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

Edge/IE	Chrome	FireFox	Safari	Opera

支持	支持	支持	支持	支持

HTML4.01和HTML5之间的差异

media属性现在支持更多值。

<link>标签media属性语法

<link>标签media属性实例

<head>
  <link rel="stylesheet" type="text/css" href="/jc_script/demo_screen.css">
  <link rel="stylesheet" type="text/css" href="/jc_script/demo_print.css" media="print">
</head>

尝试一下

<link>标签media属性值

可能的操作符

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

设备

值	描述
all	默认。用于所有媒体类型设备
print	用于打印预览模式/打印页面
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	用于大声“读取”页面的屏幕阅读器
aural	已废弃。语音合成器
braille	已废弃。盲文反馈设备
handheld	已废弃。手持设备（小屏幕，有限带宽）
projection	已废弃。投影机
tty	已废弃。使用固定间距字符网格的电传类型和类似媒体
tv	已废弃。电视类型设备（低分辨率，有限滚动能力）

值

属性值	描述
aspect-ratio	指定目标显示区域的宽高比。可以使用“min-”和“max-”前缀。例如：media=“screen and（max-aspect-ratio:16/9）”
color	指定目标显示的每种颜色位。可以使用“min-”和“max-”前缀。例如：media=“screen and（min-color:3）”
color-index	指定目标显示器可以处理的颜色数。可以使用“min-”和“max-”前缀。例如：media =“screen and（min-color-index:256）”
device-aspect-ratio	已废弃。指定目标显示/纸张的设备宽度/设备高度比。
device-width	已废弃。指定目标显示/纸张的宽度。
device-height	已废弃。指定目标显示/纸张的高度。
grid	指定输出设备是网格还是位图。网格的可能值为“1”，否则为“0”。例如：media =“handheld and（grid:1）”
height	指定目标显示区域的高度。可以使用“min-”和“max-”前缀。例如：media =“screen and（max-height:700px）”
monochrome	指定单色帧缓冲区中每像素的位数。可以使用“min-”和“max-”前缀。例如：media =“screen and（min-monochrome:2）”
orientation	指定目标显示/纸张的方向。可能的值：“纵向”或“横向” 示例：media =“all and（orientation:landscape）”
resolution	指定目标显示/纸张的像素密度（dpi或dpcm）。可以使用“min-”和“max-”前缀。例如：media =“print and（min-resolution:300Dpi）”
scan	指定电视显示器的扫描方法。可能的值为“progressive”和“interlace”。例如：media =“tv and（scan:interlace）”
width	指定目标显示区域的宽度。可以使用“min-”和“max-”前缀。例如：media =“screen and（min-width:500px）”