Latest web development tutorials

HTML link media properties

HTML link Tag Reference HTML <link> tag

Examples

For two kinds of two different media types (computer screen and print) of a different style sheet:

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

try it"

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

All major browsers support media properties.

Definition and Usage

media attribute specifies the linked document will be displayed on any device.

This attribute is usually used in conjunction with CSS style sheets for different media types specified different styles.

media property accepts a number value.

Differences between HTML 4.01 and HTML5

now supports more media attribute value.

grammar

<link media="value">

Possible operator

值 描述
and 规定一个 AND 运算符。
not 规定一个 NOT 运算符。
, 规定一个 OR 运算符。

equipment

值 描述
all 默认。适用于所有设备。
aural 语音合成器。
braille 盲文反馈装置。
handheld 手持设备（小屏幕、有限带宽）。
projection 投影仪。
print 打印预览模式/打印页面。
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)"
orientation 规定目标显示器/纸张的方向。
可能的值："portrait" 或 "landscape"。
例子：media="all and (orientation: landscape)"
aspect-ratio 规定目标显示区域的宽度/高度比。
可使用 "min-" 和 "max-" 前缀。
例子：media="screen and (aspect-ratio:16/9)"
device-aspect-ratio 规定目标显示器/纸张的 device-width/device-height 比率。
可使用 "min-" 和 "max-" 前缀。
例子：media="screen and (aspect-ratio:16/9)"
color 规定目标显示器的 bits/color。
可使用 "min-" 和 "max-" 前缀。
例子：media="screen and (color:3)"
color-index 规定目标显示器可以处理的颜色数。
可使用 "min-" 和 "max-" 前缀。
例子：media="screen and (min-color-index:256)"
monochrome 规定单色帧缓冲中的 bits/pixel。
可使用 "min-" 和 "max-" 前缀。
例子：media="screen and (monochrome:2)"
resolution 规定目标显示器/纸张的像素密度 (dpi 或 dpcm)。
可使用 "min-" 和 "max-" 前缀。
例子： media="print and (resolution:300dpi)"
scan 规定 tv 显示器的扫描方式。
可能的值："progressive" 和 "interlace"。
例子：media="tv and (scan:interlace)"
grid 规定输出设备是否是网格或位图。
可能的值："1" 为网格，否则为 "0"。
例子：media="handheld and (grid:1)"

HTML link Tag Reference HTML <link> tag