HTML样式媒体属性用于指定CSS样式针对其进行优化的媒体或设备。此属性指定样式用于特定设备,例如印刷媒体或语音。该属性可以接受多个值。
用法:
<style media="value">
可能的操作符:
值 | 描述 |
---|---|
and | AND运算符 |
not | 非运算符 |
, | 或运算符 |
设备:
值 | 描述 |
---|---|
all | 适用于所有设备 |
aural | 语音合成器 |
braille | 盲文反馈设备 |
handheld | 手持设备(小屏幕,带宽有限) |
projection | Projectors |
打印预览模式/打印页面 | |
screen | 电脑屏幕 |
tty | 使用固定间距字符网格的电传打字机和类似媒体 |
tv | 低分辨率或滚动能力有限的设备,例如电视。 |
值:
值 | 描述 |
---|---|
width | 目标显示区域的宽度。 |
height | 目标显示区域的高度 |
device-width | 目标显示或纸张宽度。 |
device-height | 目标显示或纸张的高度。 |
orientation | 目标显示或纸张方向。 |
aspect-ratio | 目标显示区域的宽/高比。 |
device-aspect-ratio | 目标显示器/纸张的device-width /device-height比。 |
color | 目标显示的每种颜色的位数。 |
color-index | 目标显示器可以处理的颜色数。 |
monochrome | 单色帧缓冲区中每个像素的位数。 |
resolution | 目标显示器/纸张的像素密度(dpi或dpcm)。 |
scan | 电视显示器的扫描方法。 |
grid | 如果输出设备是网格或位图。 |
注意:可以使用前缀“ min-”和“ max-”。
例:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:green;
}
</style>
<style media="print">
h1 {
color:green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p><a href="https://ide.geeksforgeeks.org/tryit.php"
target="_blank">
Click here
</a>
</center>
</body>
</html>
输出:
支持的浏览器:以下列出了HTML样式媒体属性支持的浏览器:
- 谷歌浏览器
- IE浏览器
- Firefox
- 苹果Safari
- Opera
相关用法
- HTML <a> media属性用法及代码示例
- HTML media属性用法及代码示例
- HTML <area> media属性用法及代码示例
- HTML <source> media属性用法及代码示例
- HTML <link> media属性用法及代码示例
- HTML <bdo> dir属性用法及代码示例
- HTML value属性用法及代码示例
- HTML <a> rel属性用法及代码示例
- HTML max属性用法及代码示例
- HTML <img> src属性用法及代码示例
- HTML name属性用法及代码示例
- HTML src属性用法及代码示例
- HTML alt属性用法及代码示例
- HTML <li> value属性用法及代码示例
注:本文由纯净天空筛选整理自Vijay Sirra大神的英文原创作品 HTML | <style> media Attribute。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。