HTML <link> media 属性
示例
两种不同媒体类型(屏幕和打印)的两种不同样式表
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
自己尝试 »
定义和用法
The media
属性指定目标资源针对的媒体/设备。
此属性主要与 CSS 样式表一起使用,以指定针对不同媒体类型的不同样式。
The media
属性可以接受多个值。
浏览器支持
属性 | |||||
---|---|---|---|---|---|
media | 是 | 是 | 是 | 是 | 是 |
语法
<link media="value">
可能的运算符
值 | 描述 |
---|---|
and | 指定 AND 运算符 |
not | 指定 NOT 运算符 |
, | or |
指定 OR 运算符
值 | 描述 |
---|---|
设备 | all |
默认。用于所有媒体类型设备 | |
用于打印预览模式/打印页面 | screen |
用于电脑屏幕、平板电脑、智能手机等。 | speech |
用于大声“朗读”页面的屏幕阅读器 | aural |
已弃用。 语音合成器 | braille |
已弃用。 盲文反馈设备 | handheld |
已弃用。 手持设备(小屏幕,带宽有限) | projection |
已弃用。 投影仪 | tty |
已弃用。 电传打字机和类似的媒体使用固定间距字符网格 | tv |
已弃用。 电视类型设备(低分辨率,滚动能力有限)
值 | 描述 |
---|---|
值 | aspect-ratio 指定目标显示区域的宽高比。 可以使用“min-”和“max-”前缀。 |
示例:media="screen and (max-aspect-ratio:16/9)" | color 指定目标显示区域的宽高比。 指定目标显示器的每种颜色的位数。 |
示例:media="screen and (min-color:3)" | color-index 指定目标显示区域的宽高比。 指定目标显示器可以处理的颜色数。 |
示例:media="screen and (min-color-index:256)" | device-aspect-ratio |
已弃用。 指定目标显示器/纸张的设备宽度/设备高度比。 | device-width |
已弃用。 指定目标显示器/纸张的宽度。 | device-height |
已弃用。 指定目标显示器/纸张的高度。 | grid 指定输出设备是网格还是位图。 可能的值为网格的“1”和“0” |
示例:media="handheld and (grid:1)" | height 指定目标显示区域的宽高比。 指定目标显示区域的高度。 |
示例:media="screen and (max-height:700px)" | monochrome 指定目标显示区域的宽高比。 指定单色帧缓冲区中的每像素位数。 |
示例:media="screen and (min-monochrome:2)" | orientation 指定目标显示器/纸张的方向。 可能的值:“portrait”或“landscape” |
示例:media="all and (orientation: landscape)" | resolution 指定目标显示区域的宽高比。 指定目标显示器/纸张的像素密度(dpi 或 dpcm)。 |
示例:media="print and (min-resolution:300dpi)" | scan 指定电视显示器的扫描方法。 可能的值为“progressive”和“interlace”。 |
示例:media="tv and (scan:interlace)" | width 指定目标显示区域的宽高比。 指定目标显示区域的宽度。 |
❮ HTML <link> 标签