Atrybut media w HTML <source>
Definicja i użycie
media Właściwość akceptuje wszystkie powszechnie używane media queries w CSS.
Uwaga:Ta właściwość może przyjąć wiele wartości.
Przykład
Element <picture> zawierający dwa pliki źródłowe i obraz rezerwowy:
<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>
gramatyka
<source media="media_query>
możliwe operatory
| operator | opis |
|---|---|
| and | określa operator AND. |
| not | określa operator NOT. |
| , | określa operator OR. |
urządzenie
| wartość | opis |
|---|---|
| all | domyślny. Przystosowany do wszystkich urządzeń. |
| aural | synthetyczny dźwięk. |
| braille | urządzenia do обратной связи braille. |
| handheld | urządzenia przenośne (mały ekran, ograniczona przepustowość). |
| projection | projektor. |
| tryb podglądu druku/strona drukarska. | |
| screen | ekran komputerowy. |
| tty | telegraphy oraz podobne medium używające siatki znaków o równych szerokościach. |
| tv | urządzenia telewizyjne (niska rozdzielczość, ograniczona zdolność paginacji). |
wartość
| wartość | opis |
|---|---|
| width |
określa szerokość docelowej strefy wyświetlania. Można używać prefiksów "min-" i "max-". Przykład: media="screen and (min-width:500px" |
| height |
określa wysokość docelowej strefy wyświetlania. Można używać prefiksów "min-" i "max-". Przykład: media="screen and (max-height:700px" |
| device-width |
określa szerokość docelowego ekranu/papieru. Można używać prefiksów "min-" i "max-". Przykład: media="screen and (device-width:500px" |
| device-height |
określa wysokość docelowego ekranu/papieru. Można używać prefiksów "min-" i "max-". Przykład: media="screen and (device-height:500px" |
| orientation |
określa kierunek docelowego ekranu/papieru. możliwe wartości: "portrait" lub "landscape" Przykład: media="all and (orientation: landscape" |
| aspect-ratio |
określa proporcję szerokości/wysokości docelowej strefy wyświetlania. Można używać prefiksów "min-" i "max-". Przykład: media="screen and (aspect-ratio:16/9" |
| device-aspect-ratio |
określa proporcję device-width/device-height docelowego ekranu/papieru. Można używać prefiksów "min-" i "max-". Przykład: media="screen and (aspect-ratio:16/9" |
| color |
określa liczbę bitów na każdy kolor docelowego ekranu. Można używać prefiksów "min-" i "max-". Przykład: media="screen and (color:3" |
| color-index |
określa liczbę kolorów, które może obsługiwać docelowy ekran. Można używać prefiksów "min-" i "max-". Przykład: media="screen and (min-color-index:256" |
| monochrome |
Określa liczbę bitów na każdy piksel w buforze jednobojowym. Można używać prefiksów "min-" i "max-". Przykład: media="screen and (monochrome:2)" |
| resolution |
Określa gęstość pikseli docelowego ekranu/papieru (dpi lub dpcm). Można używać prefiksów "min-" i "max-". Przykład: media="print and (resolution:300dpi)" |
| scan |
Określa sposób skanowania ekranu telewizora. Możliwe wartości to: "progressive" i "interlace". Przykład: media="tv and (scan:interlace)" |
| grid |
Określa, czy urządzenie wyjściowe jest siatką czy bitmapą. Możliwe wartości: "1" oznacza siatkę, "0" oznacza inne. Przykład: media="handheld and (grid:1)" |
Wspierane przeglądarki
Numer w tabeli oznacza wersję pierwszego przeglądarki wspierającej tę właściwość.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
