HTML <source> media ominaisuus
Määrittely ja käyttö
media Ominaisuus hyväksyy kaikki CSS:ssä yleensä määritellyt kelvolliset mediatutkinnat.
Huomaa:Tämä ominaisuus voi hyväksyä useita arvoja.
Esimerkki
Yksi elementti, joka sisältää kaksi lähdettä ja yhden varakuvan: <picture> elementti:
<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="Kukat" style="width:auto;"> </picture>
Syntaksi
<source media="media_query>
Mahdolliset operaattorit
| Operaattorit | Kuvaus |
|---|---|
| and | Määrittää AND operaattorin. |
| not | Määrittää NOT operaattorin. |
| , | Määrittää OR operaattorin. |
Laite
| Arvo | Kuvaus |
|---|---|
| all | Oletus. Soveltuu kaikkiin laitteisiin. |
| aural | Äänisyntä. |
| braille | Braille-palautuslaitteet. |
| handheld | Käsin pidettävä laite (pieni näyttö, rajallinen bändi). |
| projection | Projektori. |
| Tulostusennuste tai tulostussivu. | |
| screen | Tietokonesilmiäinen. |
| tty | Telekuuntelulaite ja vastaavat ympäristöt, joissa käytetään yhtä leveitä merkkejä. |
| tv | Televisiolaite (alhainen tarkkuus, rajallinen sivutuskyky). |
Arvo
| Arvo | Kuvaus |
|---|---|
| width |
Määrittää tavoitetiedonauhan leveyden. Voit käyttää "min-" ja "max-" префиксов. Esimerkki: media="screen and (min-width:500px)" |
| height |
Määrittää tavoitetiedonauhan korkeuden. Voit käyttää "min-" ja "max-" префиксов. Esimerkki: media="screen and (max-height:700px)" |
| device-width |
Määrittää tavoitetietokoneen/paperin leveyden. Voit käyttää "min-" ja "max-" префиксов. Esimerkki: media="screen and (device-width:500px)" |
| device-height |
Määrittää tavoitetietokoneen/paperin korkeuden. Voit käyttää "min-" ja "max-" префиксов. Esimerkki: media="screen and (device-height:500px)" |
| orientation |
Määrittää tavoitetietokoneen/paperin suunnan. Mahdolliset arvot: "portrait" tai "landscape" Esimerkki: media="all and (orientation: landscape)" |
| aspect-ratio |
Määrittää tavoitetiedonauhan leveys/korkeus suhteen. Voit käyttää "min-" ja "max-" префиксов. Esimerkki: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio |
Määrittää tavoitetietokoneen/paperin device-width/device-height suhteen. Voit käyttää "min-" ja "max-" префиксов. Esimerkki: media="screen and (aspect-ratio:16/9)" |
| color |
Määrittää tavoitetietokoneen jokaisen väriyksikön bittien määrän. Voit käyttää "min-" ja "max-" префиксов. Esimerkki: media="screen and (color:3)" |
| color-index |
Määrittää tavoitetietokoneen käsittämien värien määrän. Voit käyttää "min-" ja "max-" префиксов. Esimerkki: media="screen and (min-color-index:256)" |
| monochrome |
Määrittää yksivärin välimuistissa jokaisen pikselin bittien määrän. Voit käyttää "min-" ja "max-" префиксов. Esimerkki: media="screen and (monochrome:2)" |
| resolution |
Määrittää kohdennetun näyttölaitepaperin kuvapikselin tiheyden (dpi tai dpcm). Voit käyttää "min-" ja "max-" префиксов. Esimerkki: media="print and (resolution:300dpi)" |
| scan |
Määrittää tv-näyttötilan skannausmenetelmän. Mahdolliset arvot ovat: "progressive" ja "interlace". Esimerkki: media="tv and (scan:interlace)" |
| grid |
Määrittää, onko tulostuslaitteena ruudukko vai bittikartta. Mahdolliset arvot: "1" edustaa ruudukkoa, "0" on muu. Esimerkki: media="handheld and (grid:1)" |
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
