HTML <link> 标签的 media 属性 详解
HTML基础 2022-06-02 12:04:41小码哥的IT人生shichen
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>
完整实例【亲自试一试】：
<html>
<head>
<link rel="stylesheet" type="text/css" href="/demo/example/html/demo_screen.css"/>
<link rel="stylesheet" type="text/css" href="/demo/example/html/demo_print.css" media="print" />
</head>
<body>
<h1>phpcodeweb 实例</h1>
<p><a href="/example-2019/html/html_link_media.html" target="_blank">点击这里</a>，在新窗口打开本页面（没有 TIY 功能）。</p>
<p>如果您打印本页面，或者在打印预览模式中打开它，此页面会通过 media="print" 样式表进行格式化。"print" 样式表会把本页面格式化为白底黑字。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
media 属性规定被链接文档将显示在什么设备上。
media 属性用于为不同的媒介类型规定不同的样式。
浏览器支持
所有浏览器都支持值为 "screen"、"print" 以及 "all" 的 media 属性。
提示：在全屏模式中，Opera 也支持 "projection" 属性值。
语法
<link media="value">
属性值
| 值 | 描述 |
|---|---|
| screen | 计算机屏幕（默认）。 |
| tty | 电传打字机以及类似的使用等宽字符网格的媒介。 |
| tv | 电视机类型设备（低分辨率、有限的滚屏能力）。 |
| projection | 放映机。 |
| handheld | 手持设备（小屏幕、有限带宽）。 |
| 打印预览模式/打印页面。 | |
| braille | 盲人点字法反馈设备。 |
| aural | 语音合成器。 |
| all | 适用于所有设备。 |
