Responsywność i media queries w CSS

Responsywność (RWD – Responsive Web Design) to podejście do projektowania stron, które sprawia, że wyglądają one dobrze i są wygodne w użyciu na różnych urządzeniach – od smartfonów po duże monitory. Dzięki technikom RWD jedna strona dostosowuje się automatycznie do wielkości ekranu, zamiast wymagać osobnych wersji mobilnych i desktopowych.

1. Wprowadzenie do RWD (Responsive Web Design)

Główne założenia RWD:

Elastyczne siatki (fluid grids) – zamiast sztywnych wartości w px stosuje się jednostki względne (%, em, rem, vw, vh).
Elastyczne obrazy i multimedia – obrazy skalują się wraz z kontenerem (max-width: 100%).
Media queries – różne style CSS w zależności od rozmiaru ekranu lub urządzenia.

Przykład:

Dzięki temu obraz nigdy nie wyjdzie poza ekran.

2. Media queries – `@media`

Media queries umożliwiają stosowanie określonych reguł CSS dla wybranych warunków, np. szerokości ekranu, orientacji czy rodzaju urządzenia.

Składnia

Najczęściej używane warunki:

min-width – styl dla ekranów szerszych niż...,
max-width – styl dla ekranów węższych niż...,
orientation: portrait – urządzenia pionowe,
orientation: landscape – urządzenia poziome,
prefers-color-scheme: dark – użytkownik preferuje tryb ciemny.

Przykłady:

a) Styl dla ekranów mniejszych niż 600px:

b) Styl dla ekranów większych niż 1024px:

c) Styl dla orientacji poziomej:

d) Styl dla trybu ciemnego:

3. Projektowanie „mobile-first”

Mobile-first to podejście, w którym:

Najpierw projektujemy dla najmniejszych ekranów (smartfony),
Następnie rozszerzamy projekt dla większych urządzeń za pomocą min-width.

Dzięki temu strona jest zawsze dostępna i lekka na urządzeniach mobilnych, a większe ekrany dostają dodatkowe ulepszenia.

Przykład – mobile-first

Domyślne style = mobilne, a wraz ze wzrostem szerokości ekranu dodajemy nowe reguły.

4. Najczęstsze punkty przełamania (breakpoints)

Nie ma „jedynych słusznych” wartości, ale często stosuje się:

Małe telefony: max-width: 480px
Telefony i małe tablety: max-width: 768px
Tablety i małe laptopy: max-width: 1024px
Desktopy: min-width: 1200px

Można też dopasować breakpoints do treści i układu strony, zamiast trzymać się sztywnych liczb.

5. Dobre praktyki RWD

Stosuj procenty i jednostki względne (em, rem, vw, vh) zamiast sztywnych px.
Testuj na różnych urządzeniach – nie tylko na desktopie.
Projektuj mobile-first – ułatwia utrzymanie i poprawia wydajność.
Wykorzystuj narzędzia deweloperskie w przeglądarce (F12 → Device Toolbar).
Pamiętaj o dostępności (a11y) – np. nie zmniejszaj zbyt mocno tekstu.