HTML <style> 标签的 media 属性 详解
HTML基础 2022-06-02 12:07:52小码哥的IT人生shichen
HTML <style> 标签的 media 属性
实例
针对两种不同媒介类型的两种不同的样式（计算机屏幕和打印）：
<html>
<head>
<style type="text/css">
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>
<style type="text/css" media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
完整实例【亲自试一试】：
<html>
<head>
<style type="text/css">
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>
<style type="text/css" media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
media 属性用于为不同的媒介类型规定不同的样式。
提示：如需在一个 style 元素中定义一个以上的媒介类型，请使用逗号分隔的列表（例如：<style type="text/css" media="screen,projection">）。
浏览器支持
所有主流浏览器都支持 media 属性的 "screen"、"print" 以及 "all" 值。
提示：Opera 同时支持 "handheld" 值。
语法
<style media="value">
属性值
| 值 | 描述 |
|---|---|
| screen | 计算机屏幕（默认值）。 |
| tty | 电传打字机以及使用等宽字符网格的类似媒介。 |
| tv | 电视类型设备（低分辨率、有限的屏幕翻滚能力）。 |
| projection | 放映机。 |
| handheld | 手持设备（小屏幕、有限的带宽）。 |
| 打印预览模式 / 打印页。 | |
| braille | 盲人用点字法反馈设备。 |
| aural | 语音合成器。 |
| all | 适合所有设备。 |
