Jak działają zapytania medialne w tworzeniu stron…

Zapytania medialne pozwalają na stosowanie określonych stylów CSS w zależności od cech urządzenia lub obszaru wyświetlania. Służą do tworzenia responsywnego projektu, który jest poprawnie wyświetlany na różnych ekranach, w tym na urządzeniach mobilnych, tabletach i komputerach stacjonarnych.

Główna składnia zapytania medialnego:

@media <typ_medyczny> and (<wyrażenie>) {
  /* reguły CSS */
}

<typ_medyczny> określa, do jakiego typu urządzenia odnosi się zapytanie (np. screen, print, all).
<wyrażenie> ustala warunki, przy których stosowane są style (np. szerokość, wysokość, orientacja ekranu, rozdzielczość).

Popularne wyrażenia dla responsywnego projektowania:

min-width: Style są stosowane, jeśli szerokość obszaru wyświetlania jest równa lub większa od podanej wartości.
max-width: Style są stosowane, jeśli szerokość obszaru wyświetlania jest równa lub mniejsza od podanej wartości.
orientation: Style są stosowane w zależności od orientacji ekranu (portrait lub landscape).
resolution: Style są stosowane w zależności od rozdzielczości ekranu.

Przykład użycia max-width dla stylizacji na urządzeniach mobilnych:

/* Domyślne style */
body {
  font-size: 16px;
}

/* Style dla ekranów do 768px szerokości (typowo dla urządzeń mobilnych) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Przykład użycia min-width dla stylizacji na desktopach (podejście "mobile first"):

/* Domyślne style dla urządzeń mobilnych */
.column {
  width: 100%;
}

/* Style dla ekranów od 992px szerokości (typowo dla desktopów) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Połączenie wyrażeń z operatorami and, or (w zapytaniach medialnych or zapisuje się przecinkiem) i not:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Style tylko dla tabletów */
}

@media screen and (orientation: landscape), print {
  /* Style dla orientacji poziomej i druku */
}

Meta-tag viewport jest ważny dla poprawnego działania zapytań medialnych na urządzeniach mobilnych:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width ustawia szerokość obszaru wyświetlania równą szerokości urządzenia.
initial-scale=1.0 ustawia początkowy poziom powiększenia.

Bez tego meta-tagu wiele przeglądarek mobilnych domyślnie powiększa stronę, ignorując rzeczywistą szerokość urządzenia, co zakłóca responsywność.

Jak działają zapytania medialne w tworzeniu stron internetowych dla responsywnego układu, w tym urządzeń mobilnych?