Media query

Media query to mechanizm CSS pozwalający stosować reguły stylów warunkowo — tylko wtedy, gdy urządzenie lub okno przeglądarki spełnia określone kryteria. Dzięki media queries ta sama strona HTML może wyglądać inaczej na telefonie, tablecie i monitorze, bez tworzenia osobnych wersji kodu. To podstawowy budulec responsywnego web designu.

Jak działa media query?

Media query składa się z typu nośnika (najczęściej screen) oraz jednego lub więcej warunków sprawdzających cechy urządzenia, takie jak min-width, max-width, orientacja (orientation), gęstość pikseli czy preferowany tryb kolorów (prefers-color-scheme). Zapisuje się ją regułą @media, po której następuje blok stylów aktywowanych tylko wtedy, gdy warunek jest spełniony. Wartości graniczne, przy których układ się zmienia, nazywa się breakpointami. Kluczową rolę odgrywa tu viewport — to jego szerokość najczęściej bada media query.

Zastosowanie w praktyce

Media queries wykorzystuje się do budowy elastycznych układów: na szerokim ekranie strona wyświetla treść w wielu kolumnach z boczną nawigacją, a poniżej wybranego breakpointu zwija menu do „hamburgera” i układa elementy jeden pod drugim. Pozwalają też skrywać lub powiększać przyciski dotykowe, dostosowywać typografię oraz obsługiwać tryb ciemny.

Współczesne podejście zakłada projektowanie w duchu mobile-first: bazowe style pisze się dla najmniejszych ekranów, a media queries z warunkiem min-width stopniowo wzbogacają układ na większych urządzeniach. Ponieważ Google indeksuje strony na podstawie ich wersji mobilnej, poprawnie skonfigurowane media queries są istotne nie tylko dla wygody użytkownika, ale i dla SEO. Frameworki CSS, jak Bootstrap czy Tailwind, opierają swój system siatki właśnie na predefiniowanych breakpointach media query, co przyspiesza budowę responsywnych interfejsów. Warto pamiętać, że nadmierna liczba breakpointów utrudnia utrzymanie kodu — w praktyce wystarcza kilka dobrze dobranych progów odpowiadających realnym klasom urządzeń.