非常教程

HTML 参考手册教程

HTML style media 属性

HTML style media 属性

HTML <style> media 属性

HTML style media 属性

HTML <style> 标签

实例

针对两种不同媒介类型(屏幕和打印)的两个不同的样式表:

<style type="text/css" media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}

尝试一下 »

浏览器支持

HTML style media 属性

HTML style media 属性

HTML style media 属性

HTML style media 属性

HTML style media 属性

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


定义和用法

media 属性规定目前资源是为何种媒介/设备优化的。

该属性大多用在为不同媒介类型规定不同样式的 CSS 样式表。

提示:该属性可以接受多个值。


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 media 属性

HTML <style> 标签
HTML style media 属性
HTML 参考手册

HTML 参考手册提供了完整的 HTML 标签、属性、事件列表,并配有具体的实例演示,另外还讲解了拾色器、字符集等相关内容。

HTML 参考手册目录

1.HTML 事件
2.HTML 全局属性
3.HTML 标签列表(功能排序)
4.HTML 标签列表(字母排序)
5.HTML <option> 标签
6.HTML <output> 标签
7.HTML <p> 标签
8.HTML <param> 标签
9.HTML <pre> 标签
10.HTML 拾色器
11.HTML 颜色名
12.HTML 有效DOCTYPES
13.HTML 音频/视频
14.HTML 画布
15.HTML5 <mark> 标签
16.HTML <menu> 标签
17.HTML <meta> 标签
18.HTML <meter> 标签
19.HTML <nav> 标签
20.HTML <noframes> 标签
21.HTML <noscript> 标签
22.HTML <object> 标签
23.HTML <ol> 标签
24.HTML <optgroup> 标签
25.HTML <img> 标签
26.HTML <input> 标签
27.HTML <ins> 标签
28.HTML <kbd> 标签
29.HTML5 <keygen> 标签
30.HTML <legend> 标签
31.HTML <li> 标签
32.HTML <label> 标签
33.HTML <link>标签
34.HTML <map> 标签
35.HTML <area> 标签
36.HTML <applet> 标签
37.HTML <address> 标签
38.HTML <acronym> 标签
39.HTML <abbr> 标签
40.HTML <a> 标签
41.HTML <!DOCTYPE> 声明
42.HTML <button> 标签
43.HTML <i> 标签
44.HTML <iframe> 标签
45.HTML <blockquote> 标签
46.HTML <big> 标签
47.HTML <bdo> 标签
48.HTML <bdi> 标签
49.HTML <basefont> 标签
50.HTML <base> 标签
51.HTML <b> 标签
52.HTML <audio> 标签
53.HTML <aside> 标签
54.HTML <article> 标签
55.HTML <command> 标签
56.HTML <colgroup> 标签
57.HTML <col> 标签
58.HTML <code> 标签
59.HTML <cite> 标签
60.HTML <center> 标签
61.HTML <caption> 标签
62.HTML <canvas> 标签
63.HTML <br> 标签
64.HTML <body> 标签
65.HTML <dt> 标签
66.HTML <dl> 标签
67.HTML <div> 标签
68.HTML <dir> 标签
69.HTML <dialog> 标签
70.HTML <dfn> 标签
71.HTML <details> 标签
72.HTML <del> 标签
73.HTML <dd> 标签
74.HTML <datalist> 标签
75.HTML <frameset> 标签
76.HTML <frame> 标签
77.HTML <form> 标签
78.HTML <footer> 标签
79.HTML <font> 标签
80.HTML <figure> 标签
81.HTML <figcaption> 标签
82.HTML <fieldset> 标签
83.HTML <embed> 标签
84.HTML <em> 标签
85.HTML URL 编码参考手册
86.HTML 符号实体参考手册
87.HTML ISO-8859-1 参考手册
88.HTML ASCII 参考手册
89.HTML 字符集
90.HTML <hr> 标签
91.HTML <h1> – <h6> 标签
92.HTML <hgroup> 标签
93.HTML <header> 标签
94.HTML <head> 标签
95.HTML <q> 标签
96.HTML5 <progress> 标签
97.HTML <html> 标签
98.HTML <!–…–> 注释标签
99.键盘快捷键
100.HTTP 方法:GET 对比 POST