HTML <source> 标签media属性

<source>标签media属性定义和用法

media属性接受通常在CSS中定义的任何有效媒体查询。
注意：此属性可以接受多个值。

<source>标签media属性浏览器支持

Edge/IE	Chrome	FireFox	Safari	Opera

支持	38.0（含）以上	38.0（含）以上	9.1（含）以上	25.0（含）以上

HTML4.01和HTML5之间的差异

<source>标记是HTML5中的新标记。

<source>标签media属性语法

<source>标签media属性实例

<picture>
    <source media="(min-width: 650px)" srcset="/images/fj3.jpg">
    <source media="(min-width: 465px)" srcset="/images/fj2.jpg">
    <img src="/images/fj1.jpg" alt="fj" style="width:auto;">
</picture>

尝试一下

<source>标签media可能的操作符

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

<source>标签media属性的设备

设备	描述
all	默认。适用于所有设备
aural	语音合成器
braille	盲文反馈设备
handheld	手持设备(小屏幕，有限带宽)
projection	投影仪
print	打印预览模式/打印页面
screen	电脑屏幕
tty	使用固定间距字符网格的电传和类似媒体
tv	电视类型设备(分辨率低，滚动能力有限)

<source>标签media属性的值

值	描述
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(设备宽度:500px)"
device-height	指定目标显示/纸张的高度。可以使用“min-”和“max-”前缀。例如:media="screen and(设备高度:500px)"
orientation	指定目标显示/纸张的方向。可能的值:“portrait”或“landscape”。例子:media="all and (orientation: landscape)"
aspect-ratio	指定目标显示区域的宽度/高度比。可以使用“min-”和“max-”前缀。例如:media="screen and (aspect ratio:16/9)"
device-aspect-ratio	指定目标显示器/纸张的设备宽度/设备高度比。可以使用“min-”和“max-”前缀。例如:media="screen and (aspect ratio:16/9)"
color	指定目标显示的每种颜色的位。可以使用“min-”和“max-”前缀。例如:media="screen and (color:3)"
color-index	指定目标显示器可以处理的颜色数。可以使用“min-”和“max-”前缀。例子:media="screen and (min-color index:256)"
monochrome	指定单色帧缓冲区中每个像素的比特数。可以使用“min-”和“max-”前缀。例如:media="screen and(单色:2)"
resolution	指定目标显示器/纸张的像素密度(dpi或dpcm)。可以使用“min-”和“max-”前缀。示例:media="print and (resolution:300dpi)"
scan	指定电视显示器的扫描方法。可能的值是“progressive”和“interlace”。例如:media="tv and (scan:interlace)"
grid	指定输出设备是网格还是位图。网格的可能值为“1”，否则为“0”。示例:media="handheld and (grid:1)"