Zapytania o media

Zapytania o media to funkcja języka CSS, która pozwala dostosowywać zawartość strony internetowej do różnych rozmiarów i rozdzielczości ekranów. Są podstawowym elementem responsywnego projektowania stron internetowych i służą do dostosowywania wyglądu witryn do wielu urządzeń.

Zapytania o media można umieszczać w kodzie HTML strony internetowej lub w osobnym pliku .CSS, do którego odwołuje się strona. Poniżej znajduje się przykład prostego zapytania o media:

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

Powyższe zapytanie o media zostaje aktywowane, gdy okno przeglądarki użytkownika ma szerokość 768 pikseli lub mniejszą. Może się tak zdarzyć po zmniejszeniu okna na komputerze stacjonarnym albo podczas korzystania z urządzenia mobilnego, takiego jak tablet, do wyświetlania strony internetowej.

W responsywnym projektowaniu stron internetowych zapytania o media działają jak filtry dla różnych rozmiarów ekranów. Podobnie jak wszystkie moduły w kaskadowym arkuszu stylów, te znajdujące się niżej na liście zastępują te umieszczone wyżej. Dlatego style domyślne są zwykle definiowane na początku dokumentu CSS, a następnie umieszcza się w nim zapytania o media dla różnych rozmiarów ekranów. Na przykład najpierw można zdefiniować style dla komputerów stacjonarnych, następnie zapytanie o media ze stylami dla użytkowników tabletów, a na końcu zapytanie o media przeznaczone dla użytkowników smartfonów. Style można również definiować w odwrotnej kolejności, co określa się jako projektowanie „mobile first”.

Chociaż min-width jest zdecydowanie najczęściej używaną funkcją w zapytaniach o media, dostępnych jest również wiele innych. Należą do nich min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation i resolution. Wartość resolution może na przykład służyć do wykrywania ekranów HiDPI, takich jak ekrany Retina, i wczytywania grafik o wysokiej rozdzielczości zamiast standardowych obrazów.