Podstawą działania media queries jest reguła @media, która może zawierać typ medium oraz jeden lub więcej warunków dotyczących cech urządzenia. Przykładowo, można określić, że dany styl ma obowiązywać tylko wtedy, gdy szerokość okna przeglądarki przekracza określoną wartość. Dzięki temu strona może płynnie przechodzić między różnymi układami, nie tracąc przy tym spójności wizualnej.

Media queries obsługują wiele cech urządzenia, takich jak orientacja ekranu, rozdzielczość, wysokość i szerokość widoku, a nawet preferencje użytkownika dotyczące kontrastu czy ruchu. To wszechstronne możliwości, które pozwalają na precyzyjne dopasowanie stylów do kontekstu, w jakim strona jest przeglądana. Co ciekawe, można też sprawdzać, czy urządzenie obsługuje hover, czyli najeżdżanie kursorem – przydatne, gdy chcemy dostosować interakcje do ekranów dotykowych.

Media queries można stosować nie tylko w arkuszach CSS, ale również bezpośrednio w HTML, np. w atrybutach media w znacznikach <link> czy <source>. To wygodna metoda, która pozwala ładować różne zasoby w zależności od warunków – na przykład inne obrazy dla ekranów o mniejszej szerokości. W JavaScripcie dostępna jest funkcja matchMedia(), która umożliwia dynamiczne reagowanie na zmiany warunków, co otwiera drzwi do bardziej reaktywnych rozwiązań.

Czy media queries są trudne? Niekoniecznie. Ich składnia jest przejrzysta, a logika działania opiera się na prostych zasadach. Wystarczy znać kilka słów kluczowych, takich jak not, only czy and, by tworzyć złożone warunki. Można też łączyć wiele zapytań w jednej regule, oddzielając je przecinkami – to jak pisanie listy życzeń dla przeglądarki, która wybiera to, co pasuje.

Na koniec warto wspomnieć, że media queries nie są tylko technicznym dodatkiem. To subtelne narzędzie, które wpływa na odbiór strony przez użytkownika. Dobrze zaprojektowane zapytania medialne sprawiają, że witryna wygląda harmonijnie niezależnie od urządzenia, co przekłada się na komfort przeglądania. A przecież o to chodzi – by strona była przyjazna, niezależnie od tego, czy ktoś siedzi przy biurku, czy przegląda ją w tramwaju.