HTML 参考手册

HTML 标签大全

HTML style media 属性

media属性指定CSS样式针对哪种媒体/设备进行了优化,此属性用于指定样式用于特殊设备(例如iPhone),语音或印刷媒体。

 HTML <style> 标签

在线示例

指定用于打印的样式:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML source media 属性使用-基础教程(niaoge.com)</title>
<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>
<h1>(niaoge.com) Example</h1>
<p>如果您打印此页面,或在打印预览中打开它,则将看到它使用media =“ print”样式表进行样式设置。“打印”样式表包含白色背景上的黑色文本。</p>
</body>
</html>
测试看看 ‹/›

浏览器兼容性

IEFirefoxOperaChromeSafari

所有主流浏览器都支持 media 属性。

定义和用法

media属性指定CSS样式针对哪种媒体/设备进行了优化。
此属性用于指定样式用于特殊设备(例如iPhone),语音或印刷媒体。
提示:此属性可以接受多个值。

HTML 4.01 与 HTML5之间的差异

没有。

语法

<style media="value">

可能的运算符

描述
and指定 AND 操作符。
not指定 NOT 操作符。
,指定 OR 操作符。

设备

描述
all默认。适应所有设备。
aural语音合成器。
braille盲人用点字法反馈设备。
handheld手持设备(小屏幕、有限的带宽)。
projection放映机。
print打印预览模式 / 打印页。
screen计算机屏幕(默认值)。
tty电传打字机以及使用等宽字符网格的类似媒介。
tv电视类型设备(低分辨率、有限的屏幕翻滚能力)。

描述
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" or "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 <style> 标签