Media queries — lekcja tworzenia responsywnej strony

Strona oglądana na telefonie, tablecie i monitorze powinna wyglądać dobrze na każdym z nich. Reguły @media pozwalają zmieniać styl zależnie od cech urządzenia — najczęściej szerokości okna. Na lekcji uczniowie budują układ trzech kolumn, który na wąskim ekranie zamienia się w układ jednokolumnowy, i sprawdzają pomiarem, przy jakiej szerokości następuje zmiana.

Scenariusz jest przeznaczony na 45 minut dla klasy znającej Flexbox — na przykład po lekcji o Flexboksie — oraz tagu meta viewport z lekcji o strukturze dokumentu.

Przygotowanie stanowisk

Potrzebne są przeglądarka z narzędziami deweloperskimi (F12) i edytor tekstu. Rozpakuj pakiet z sekcji materiałów do osobnego folderu. HTML w obu folderach jest taki sam i jej nie zmieniasz — pracujesz w start/style.css. Po zapisaniu pliku odśwież stronę. Wymiary elementów sprawdzisz w narzędziach deweloperskich (zakładka Elements, panel Computed). Gotowe rozwiązanie jest w folderze rozwiazanie. Internet nie jest wymagany.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• wyjaśnić, po co strona ma meta viewport i media queries;
• zapisać regułę @media (max-width: 600px) i umieścić w niej zmianę układu;
• zmierzyć układ przy różnych szerokościach okna i wskazać punkt graniczny;
• sprawdzić działanie zapytania w konsoli (matchMedia).

Reguła @media

@media (max-width: 600px) {
  .uklad {
    flex-direction: column;
  }
}

Reguły wewnątrz bloku @media obowiązują tylko wtedy, gdy warunek jest prawdziwy. max-width: 600px znaczy „szerokość okna nie większa niż 600 px” (włącznie z 600 px), a min-width: 601px — „co najmniej 601 px”. Zapisy max-width: 600px i min-width: 601px dzielą świat dokładnie na dwie części. Szerokość, o której mowa, to szerokość okna (widocznego obszaru), nie ekranu.

Aby strona na telefonie nie była pomniejszana do szerokości komputera, w head musi być <meta name="viewport" content="width=device-width, initial-scale=1">; bez niej przeglądarka telefonu udaje, że okno ma około 980 px, i media queries nie zadziałają tak, jak oczekujemy.

Podejścia

• Desktop first — domyślny styl dla dużych ekranów, a @media (max-width: …) poprawia go dla małych (jak w tej lekcji).
• Mobile first — domyślny styl dla telefonu, a @media (min-width: …) dodaje bogatszy układ dla większych ekranów; zwykle prostszy w utrzymaniu.

Punkty graniczne wybiera się tam, gdzie układ przestaje wyglądać dobrze, a nie według popularnych urządzeń. Stan zapytania w konsoli sprawdzisz: window.matchMedia("(max-width: 600px)").matches (true lub false).

Zadania

Zadanie 1. Trzy kolumny. Ustaw .uklad jako Flexbox z odstępem 16 px, a .kolumna z flex: 1 i wysokością 60 px. Zmierz szerokość kolumn przy oknie 800 px.

Zadanie 2. Media query. Dopisz regułę @media (max-width: 600px), w której .uklad dostaje flex-direction: column.

Zadanie 3. Punkt graniczny. Zmierz układ przy szerokości okna 800, 601, 600 i 500 px. W każdym przypadku zapisz wartość matchMedia("(max-width: 600px)").matches i to, czy kolumny stoją obok siebie.

Dla chętnych: zamień zapis na „mobile first”: układ kolumnowy jako domyślny i @media (min-width: 601px) dla układu poziomego. Sprawdź, czy wyniki pomiarów się nie zmieniły.

Rozwiązanie i wyniki

body {
  margin: 0;
  padding: 16px;
  font-family: sans-serif;
}
.uklad {
  display: flex;
  gap: 16px;
}
.kolumna {
  flex: 1;
  height: 60px;
  background: #dbeafe;
}
@media (max-width: 600px) {
  .uklad {
    flex-direction: column;
  }
}

Pomiary w przeglądarce: przy szerokości okna 800 px kolumny stoją obok siebie, każda ma szerokość 245,33 px ((800 − 32 − 2 · 16) : 3) i wysokość 60 px, a górna krawędź leży w punkcie 16 px. Przy 601 px — nadal obok siebie (szerokość kolumny 179 px). Przy 600 i 500 px kolumny stoją jedna pod drugą: szerokość kolumny jest równa kontenerowi (568 px przy 600 px, 468 px przy 500 px), a górne krawędzie leżą w punktach 16, 50,5 i 85 px. W układzie pionowym kolumny mają wysokość 18,5 px (wysokość tekstu), a nie 60 px, ponieważ flex: 1 ustawia podstawę elastyczności na 0 i w układzie kolumnowym ma pierwszeństwo przed height; aby zachować 60 px, w media query trzeba dodać .kolumna { flex: none; }. matchMedia("(max-width: 600px)").matches daje false przy 800 i 601 px oraz true przy 600 i 500 px.

Typowe błędy

Pytania kontrolne i punktacja

1. Co oznacza @media (max-width: 600px)?
2. Po co strona ma meta viewport?
3. Czym różni się „mobile first” od „desktop first”?

Odpowiedzi: Reguły obowiązują, gdy szerokość okna jest nie większa niż 600 px (włącznie z 600). Aby przeglądarka telefonu używała rzeczywistej szerokości ekranu, a nie udawała szerokiego okna. W „mobile first” domyślny styl jest dla małych ekranów i rozszerza się go min-width; w „desktop first” — odwrotnie, z max-width.

Proponowana punktacja (razem 10 punktów): zadanie 1 — Flexbox z odstępem i kolumnami 2 pkt, pomiar 1 pkt; zadanie 2 — poprawny @media z flex-direction: column 2 pkt; zadanie 3 — cztery pomiary 2 pkt, matchMedia 1 pkt; wyjaśnienie punktu granicznego 1 pkt; meta viewport w HTML 1 pkt. Zadanie dla chętnych nie jest wymagane do pełnej oceny.

Materiały do pobrania

• Pakiet CSS: materiały do lekcji, rozwiązanie i karta pracy
• Karta pracy ucznia — otwórz i wydrukuj

Rozpakuj ZIP przed otwarciem plików. Materiały są dostępne bez logowania; publiczne rozwiązanie służy nauce i samodzielnemu sprawdzeniu, a nie poufnemu sprawdzianowi.

Co dalej?

Następny krok to siatki elastyczne, obrazy responsywne i projekt całej strony. Ten materiał rozwija dział o układzie responsywnym w kursie CSS w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: media queries w MDN oraz projektowanie responsywne. Zobacz też lekcję o Flexboksie.