HTML源媒体属性接受通常在CSS中定义的任何有效媒体查询。该属性可以接受多个值。
用法:
<source media="media_query">
可能的操作符:
值 | 描述 |
---|---|
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>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width:600px)"
srcset="img1.png">
<source media="(min-width:400px)"
srcset="img2.png">
<img src="img3.png" style="width:auto;">
</picture>
</body>
</html>
输出:更改浏览器大小。
支持的浏览器:下面列出了HTML源媒体属性支持的浏览器:
- 谷歌浏览器
- IE浏览器
- Firefox
- 苹果Safari
- Opera
相关用法
- HTML <a> media属性用法及代码示例
- HTML media属性用法及代码示例
- HTML <area> media属性用法及代码示例
- HTML <style> 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 | <source> media Attribute。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。