Atribut media <source> HTML
Definisi dan penggunaan
media Atribut menerima setiap media query yang biasanya ditentukan dalam CSS.
Perhatian:Atribut ini dapat menerima beberapa nilai.
Contoh
Sebuah elemen <picture> yang mengandung dua file sumber dan gambar cadangan:
<picture> <source media="(min-width:650px)" srcset="flower-1.jpg"> <source media="(min-width:465px)" srcset="flower-2.jpg"> <img src="flower-3.jpg" alt="Flowers" style="width:auto;"> </picture>
gramatika
<source media="media_query>
operator yang mungkin
| operator | deskripsi |
|---|---|
| and | menentukan operator AND. |
| not | menentukan operator NOT. |
| , | menentukan operator OR. |
perangkat
| nilai | deskripsi |
|---|---|
| all | default. Sesuai untuk semua perangkat. |
| aural | synthesizer suara. |
| braille | perangkat umpan balik braille. |
| handheld | perangkat tangki (layar kecil, bandwidth terbatas). |
| projection | proyektor. |
| mode pratinjau cetak/halaman cetak. | |
| screen | layar komputer. |
| tty | teletypewriter dan media yang serupa yang menggunakan grid karakter lebar sama. |
| tv | perangkat jenis TV (resolusi rendah, kemampuan halaman terbatas). |
nilai
| nilai | deskripsi |
|---|---|
| width |
menentukan lebar area perekspektif tujuan. 可使用 "min-" 和 "max-" 前缀。 contoh: media="screen and (min-width:500px)" |
| height |
menentukan tinggi area perekspektif tujuan. 可使用 "min-" 和 "max-" 前缀。 contoh: media="screen and (max-height:700px)" |
| device-width |
menentukan lebar monitor/papir tujuan. 可使用 "min-" 和 "max-" 前缀。 contoh: media="screen and (device-width:500px)" |
| device-height |
menentukan tinggi monitor/papir tujuan. 可使用 "min-" 和 "max-" 前缀。 contoh: media="screen and (device-height:500px)" |
| orientation |
menentukan arah monitor/papir tujuan. nilai yang mungkin: "portrait" atau "landscape" contoh: media="all and (orientation: landscape)" |
| aspect-ratio |
menentukan rasio lebar/tinggi area perekspektif tujuan. 可使用 "min-" 和 "max-" 前缀。 contoh: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio |
menentukan rasio lebar/tinggi device-width/device-height untuk monitor/papir tujuan. 可使用 "min-" 和 "max-" 前缀。 contoh: media="screen and (aspect-ratio:16/9)" |
| color |
menentukan jumlah digit warna untuk setiap warna perekspektif display tujuan. 可使用 "min-" 和 "max-" 前缀。 contoh: media="screen and (color:3)" |
| color-index |
menentukan jumlah warna yang dapat disanggupi monitor tujuan. 可使用 "min-" 和 "max-" 前缀。 contoh: media="screen and (min-color-index:256)" |
| monochrome |
规定在单色帧缓冲中的每像素比特。 可使用 "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)" |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
