Jan. 8th,2019
＃
“media”属性について
“media”属性はリソースが対象とするメディア条件を指定します。属性値はメディアクエリで指定します。
ブラウザは“media”属性で指定された条件をもとに“picture”要素の中に配置された“source”要素の中から表示するリソースを選択します。条件に当てはまる“media”属性がない場合は“picture”要素の中で“source”要素の後に配置される“img”要素で指定された画像が使用されます。
親要素となる“picture”要素の中に複数の“source”要素が配置されている時に複数の“source”要素の“media”属性で指定された条件に当てはまる場合は先に記述されている“source”要素が優先され、後に記述された“source”要素は無視されます。
“media”属性は親要素が“picture”要素である場合に指定できます。また、この時必須属性です。
“media”属性は親要素が“audio”要素もしくは“video”要素の時は無視されます。
＃
＃
サンプルコード
<p>
<picture>
<source media="(max-width: 320px)" srcset="sample-320-sp.png">
<source media="(max-width: 640px)" srcset="sample-640.png">
<source media="(min-width: 640px)" srcset="sample-1280.png">
<img src="sample-640.png" alt="サンプルの写真">
</picture>
</p>
