Media queries w CSS

Media queries to mechanizm w CSS, który pozwala stosować określone style tylko w pewnych warunkach, np. gdy szerokość ekranu jest mniejsza niż zadana wartość. Dzięki temu możemy zmieniać układ i wygląd strony dynamicznie przy różnych rozdzielczościach. Idea jest prosta: jeśli spełniony jest dany warunek media, to zastosuj te style.

Najczęściej używane warunki

Najczęściej używanym warunkiem jest szerokość viewportu (okna przeglądarki). Używamy słów kluczowych takich jak max-width (do stylów dla ekranów mniejszych bądź równych danej szerokości) lub min-width (dla ekranów większych niż pewna szerokość).

Składnia

@media (max-width: 600px) {
    /* style, które obowiązują, gdy szerokość ekranu <= 600px */
}

Można łączyć warunki, np.

@media (min-width: 601px) and (max-width: 1000px) {
    /* ... */
}

dla zakresu, ale na start często wystarczy jeden próg.

Przykład zastosowania

Mamy menu nawigacyjne, które na dużym ekranie wyświetla się poziomo (np. dzięki flexbox). Na bardzo wąskim ekranie (telefon) lepiej, by linki menu ułożyły się pionowo (jeden pod drugim), bo poziome menu mogłoby się nie mieścić.

Załóżmy, że nasze menu jest zrealizowane jako:

nav ul {
    display: flex;
    /* domyślnie flex układa w wierszu (row) */
}

Aby na ekranach 600px i węższych zmienić kierunek flexa na kolumnę, dodajemy:

@media (max-width: 600px) {
    nav ul {
        flex-direction: column;   /* ustaw elementy menu jeden pod drugim */
        align-items: center;      /* opcjonalnie centrowanie linków na środku */
    }
    nav li {
        margin: 8px 0;           /* odstępy między kolejnymi linkami w pionie */
    }
}

Teraz, gdy okno przeglądarki ma 600px szerokości lub mniej (np. typowe smartfony w pionie), reguły wewnątrz @media nadpiszą domyślne. Menu stanie się pionowe z linkami jeden pod drugim (i odstępami 8px). Na większym ekranie te style nie obowiązują, więc menu pozostaje poziome.

Inne zastosowania media queries

• Ukrywanie pewnych elementów na małych ekranach (np. dużego baneru czy nadmiarowych obrazków) za pomocą display: none.
• Zmiana rozmiarów czcionek lub obrazków.
• Przeorganizowanie layoutu (np. zmiana szerokości kolumn, albo przełączenie z układu kolumnowego na wierszowy).

Mobile-first vs desktop-first

Najczęściej projektuje się tzw. mobile-first, co oznacza, że piszemy CSS domyślny pod urządzenia mobilne (prosty, jednokolumnowy układ), a następnie dodajemy @media (min-width: X) dla większych ekranów, by rozbudować układ (np. "na większym ekranie pokaż boczną kolumnę").

Można też podejść odwrotnie (desktop-first) i używać max-width do uproszczenia układu na mobile — nasz wcześniejszy przykład był raczej desktop-first, bo najpierw zrobiliśmy menu poziome, a potem przerobiliśmy je na pionowe dla małych ekranów.

Propozycja pragmatyczna

W tej podstawowej wersji zachęcamy do eksperymentów z jednym progiem (np. 600px lub 768px — typowa szerokość tabletów). Nawet pojedyncza media query potrafi znacząco poprawić wygląd strony na telefonie.

/* Styl domyślny dla desktopu: menu poziome, duży margines boczny kontenera itp. */

/* ...twoje style... */

/* Styl dla ekranów max 600px (telefony) */
@media (max-width: 600px) {
   body {
       font-size: 90%; /* nieco mniejsza czcionka, by więcej tekstu się mieściło */
   }
   .sidebar {
       display: none; /* ukryj boczną kolumnę, jeśli istniała, zostaw tylko główną treść */
   }
   nav ul {
       flex-direction: column;
   }
   /* itd... */
}

Podsumowanie

Media queries dają kontrolę nad tym, jak CSS zachowuje się na różnych urządzeniach. Z minimalnym użyciem — np. jednej reguły @media — możemy dostosować stronę tak, by była czytelniejsza i ładniejsza na małym ekranie, co jest obecnie bardzo ważne, ponieważ wiele osób przegląda internet głównie na smartfonach.