HTMLリファレンスマニュアル

HTMLタグ一覧

HTML source media属性

source media属性は、CSSで定義される通常の有効なメディアクエリを接受します。media属性は複数の値を受け入れます。

オンラインサンプル

2つのソースファイルと代替画像を持つ<picture>要素：

例

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8>
<title>HTML　source　media　属性の使用-基本チュートリアル(oldtoolbag.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> タグ

HTML: <template> タグ