Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >@media

@media

@media [typ] [and] (warunek) { … }

Style w niej obowiązują tylko wtedy, gdy urządzenie i okno spełniają warunek. To podstawa responsywnej strony: @media (min-width: 700px) { … } dodaje układ dla szerszych ekranów. Warunki można łączyć i zagnieżdżać; przeglądarka ocenia je na nowo przy każdej zmianie okna.

Wartości

typ – screen, print, all (domyślnie).
(width >= 600px), (400px <= width < 800px) – składnia zakresów; Chrome od 104, Firefox od 102, Safari od 16.4. Starsza składnia: (min-width: 600px), (max-width: 799px).
(orientation: landscape), (aspect-ratio > 16/9) – kształt okna.
(hover: hover), (pointer: coarse) – mysz czy dotyk.
(prefers-color-scheme: dark), (prefers-reduced-motion: reduce), (prefers-contrast: more), (forced-colors: active) – ustawienia użytkownika.
(resolution >= 2x) – gęstość pikseli ekranu.
and, przecinek (lub), not, or wewnątrz warunku (Chrome od 104, Firefox od 64, Safari od 16.4).

Przykłady

Mobile first: na wąskim ekranie karty są jedna pod drugą, od 700 px w dwóch kolumnach:

.cards {
  display: grid;
  gap: 16px;
}
@media (width >= 700px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

Wynik: przy szerokości okna poniżej 700 px karty są w jednej kolumnie, od 700 px w dwóch.

Przy drukowaniu znika menu i stopka, tekst jest czarny na białym tle:

@media print {
  nav,
  footer,
  .ad { display: none; }
  body {
    background: #fff;
    color: #000;
  }
}

Na co uważać

Na telefonie strona musi mieć w nagłówku <meta name="viewport" content="width=device-width, initial-scale=1">, inaczej udaje szerokość około 980 px i warunki szerokości nie działają.
em i rem w warunku liczą się od domyślnego rozmiaru czcionki przeglądarki (zwykle 16 px), a nie od font-size ustawionego w CSS.
Granice łatwo się nakładają: (max-width: 700px) i (min-width: 700px) obowiązują oba przy szerokości dokładnie 700 px. Rozwiązuje to składnia zakresów (width < 700px i width >= 700px).
W warunku nie działa var(). Reguły w @media nie mają wyższego priorytetu – przy równej specyficzności decyduje kolejność, więc pisz je po stylach podstawowych.
Według rozmiaru otaczającego komponentu zamiast okna decyduje @container.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 1, Firefox 1, Safari 3. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
@container
prefers-color-scheme
prefers-reduced-motion
@supports
:hover
Jednostki długości (px, em, rem, %, vw…)