HTML 参考手册

HTML 标签大全

HTML source media 属性

source media属性接受通常在CSS中定义的任何有效的媒体查询,media属性可接受多个值。

 HTML <source> 标签

在线示例

具有两个源文件和一个备用图像的<picture>元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML source media 属性使用-基础教程(niaoge.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<p>调整浏览器大小,以查看在不同视口大小下加载的图片的不同版本。浏览器将查找媒体查询与用户当前视口宽度匹配的第一个source元素,并获取srcset属性中指定的图像。</p>
<p>img元素是图片声明块的最后一个子标签。img元素用于为不支持picture元素的浏览器或没有匹配的源标签提供向后兼容性。
</p>
</body>
</html>
测试看看 ‹/›

浏览器兼容性

IEFirefoxOperaChromeSafari

所有的主流浏览器都支持 media 属性。注意: IE12和更早版本或Safari 9.0和更早版本不支持picture元素

定义和用法

media属性接受通常在CSS中定义的任何有效的媒体查询。

注意:该属性可接受多个值。

HTML 4.01 与 HTML5之间的差异

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

语法

<source 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" 或 "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 <source> 标签