Media query (zapytanie o media) to reguła CSS, która pozwala uzależnić stosowane style od cech urządzenia lub okna przeglądarki — najczęściej od szerokości viewportu, ale też od orientacji ekranu, rozdzielczości, trybu jasny/ciemny czy preferencji użytkownika dotyczących animacji. Mówiąc po ludzku: dzięki niej ta sama strona inaczej wygląda na telefonie, inaczej na tablecie, a jeszcze inaczej na monitorze 27 cali. To fundament responsive web design.
Jak to działa
Media query składa się ze słowa kluczowego @media, opcjonalnego typu nośnika (np. screen, print) oraz jednego lub kilku warunków w nawiasach. Jeśli warunek jest spełniony, przeglądarka aplikuje style z wnętrza bloku. Jeśli nie — ignoruje je i leci dalej. Najważniejsze, że dzieje się to dynamicznie: obracasz telefon albo zwężasz okno, warunek przestaje pasować i layout reaguje na żywo, bez przeładowania strony.
Typowe cechy, których możesz pytać, to min-width, max-width, orientation, prefers-color-scheme (jasny/ciemny motyw) oraz prefers-reduced-motion (gdy ktoś nie chce animacji). Te dwie ostatnie pokazują, że media queries dawno wyszły poza samą szerokość ekranu.
Przykład z praktyki
Klasyczne podejście mobile-first: piszesz bazowe style dla małych ekranów, a większe layouty dokładasz w miarę wzrostu szerokości.
.menu { display: block; }— domyślnie, na telefonie menu jest pionowe.@media (min-width: 768px) { .menu { display: flex; } }— od 768px w górę menu staje się poziome.
Tu przyda się breakpoint, czyli punkt graniczny szerokości, w którym layout się przełamuje. Frameworki jak Tailwind CSS czy Bootstrap mają gotowe breakpointy (np. sm, md, lg), które pod spodem to po prostu media queries.
Częste błędy
Najczęstsza wpadka to zapomniany tag w sekcji head. Bez niego telefon udaje, że ma szeroki ekran, i Twoje media queries oparte na max-width w ogóle się nie odpalają — strona wygląda jak miniaturka desktopu. Druga pułapka to mieszanie min-width i max-width bez ładu, przez co dwa zakresy nakładają się i style walczą o pierwszeństwo. Trzymaj się jednej konwencji (najlepiej mobile-first z min-width) i nie mnóż breakpointów ponad realną potrzebę — nie musisz mieć osobnego dla każdego modelu iPhone’a.
Pojęcia powiązane: responsive web design, breakpoint, viewport, CSS, mobile-first, Flexbox, CSS Grid, container queries (nowszy mechanizm reagujący na rozmiar kontenera, nie całego okna).