Ponad 60% ruchu w internecie pochodzi dziś z urządzeń mobilnych. Jeśli Twoja strona nie wygląda dobrze na smartfonie, tracisz większość odwiedzających. Responsive Web Design (RWD) to podejście do tworzenia stron, które automatycznie dostosowują się do rozmiaru ekranu — niezależnie od tego, czy użytkownik korzysta z telefonu, tabletu czy monitora 4K.
W tym artykule omówimy najważniejsze techniki responsywnego projektowania: media queries, Flexbox, CSS Grid oraz podejście mobile-first. Każdą z nich zilustrujemy praktycznym przykładem kodu.
Czym jest Responsive Web Design
Termin Responsive Web Design został wprowadzony przez Ethana Marcotte’a w 2010 roku. Idea jest prosta: zamiast tworzyć osobne wersje strony dla różnych urządzeń, budujemy jeden elastyczny układ, który reaguje na zmiany rozmiaru okna przeglądarki. Kluczowe elementy RWD to:
- Elastyczna siatka — układ oparty na procentach zamiast stałych pikseli
- Elastyczne obrazy — grafiki skalujące się w obrębie kontenera (
max-width: 100%) - Media queries — reguły CSS stosowane warunkowo w zależności od parametrów ekranu
Fundamentem responsywności jest tag viewport w sekcji <head> dokumentu HTML. Bez niego przeglądarka mobilna renderuje stronę tak, jakby ekran miał 980 pikseli szerokości — co czyni wszystko nieczytelnym.
Media queries — warunkowe style CSS
Media queries pozwalają stosować różne reguły CSS w zależności od szerokości ekranu, orientacji urządzenia czy nawet preferencji użytkownika (np. tryb ciemny). Najczęściej używamy ich do zmiany układu strony na mniejszych ekranach.
/* Domyślnie: 3 kolumny */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Tablet: 2 kolumny */
@media (max-width: 860px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Telefon: 1 kolumna */
@media (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
}Breakpointy (punkty przerwania) dobieramy do treści, nie do konkretnych urządzeń. Popularne wartości to 600px, 768px i 1024px, ale zawsze warto przetestować, przy jakiej szerokości układ zaczyna wyglądać źle — i tam ustawić breakpoint.
Flexbox — elastyczne układy jednowymiarowe
Flexbox (Flexible Box Layout) to moduł CSS idealny do rozmieszczania elementów w jednym kierunku — w wierszu lub kolumnie. Świetnie sprawdza się w nawigacji, paskach narzędzi, sekcjach z kartami czy centrowania treści.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
height: 64px;
}
.nav-links {
display: flex;
gap: 16px;
}
/* Na telefonie: ukryj linki, pokaż hamburger */
@media (max-width: 600px) {
.nav-links { display: none; }
.hamburger { display: block; }
}Najważniejsze właściwości Flexboxa to justify-content (rozmieszczenie wzdłuż osi głównej), align-items (wyrównanie na osi poprzecznej) i flex-wrap (zawijanie elementów do kolejnego wiersza). Dzięki flex-wrap: wrap elementy automatycznie przenoszą się do nowej linii, gdy brakuje miejsca.
CSS Grid — dwuwymiarowe siatki
Tam, gdzie Flexbox operuje w jednym wymiarze, CSS Grid pozwala kontrolować zarówno wiersze, jak i kolumny jednocześnie. To najlepsze narzędzie do budowania złożonych układów stron — od siatki artykułów po pełne layouty z nagłówkiem, paskiem bocznym i stopką.
.page-layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
min-height: 100vh;
}
@media (max-width: 768px) {
.page-layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
}Właściwość grid-template-areas to jeden z najczytelniejszych sposobów definiowania layoutu w CSS. Nazwy obszarów tworzą wizualną mapę strony, którą łatwo zrozumieć nawet bez uruchamiania kodu w przeglądarce.
Mobile-first — projektowanie od najmniejszego ekranu
Podejście mobile-first polega na pisaniu domyślnych stylów dla urządzeń mobilnych, a następnie rozszerzaniu ich za pomocą min-width media queries dla większych ekranów. To odwrotność tradycyjnego podejścia, w którym zaczynamy od wersji desktopowej i próbujemy ją zmniejszyć.
Dlaczego mobile-first działa lepiej? Na małym ekranie mamy mniej miejsca, więc musimy skupić się na tym, co naprawdę ważne. Priorytetyzujemy treść, upraszczamy nawigację i eliminujemy zbędne elementy. Potem, gdy mamy więcej przestrzeni, dodajemy kolejne funkcje i kolumny.
W praktyce oznacza to, że podstawowe style CSS definiują jednokolu-mnowy układ, a media queries z min-width dodają kolumny i elementy dekoracyjne na większych ekranach. Takie podejście jest też szybsze — przeglądarki mobilne nie muszą parsować i odrzucać desktopowych reguł CSS.
Podsumowanie
Responsive Web Design nie jest już opcją — to standard. Każda nowoczesna strona powinna poprawnie wyświetlać się na ekranach od 320 do 2560 pikseli. Kluczowe narzędzia to:
- Media queries — do warunkowego stosowania stylów w zależności od rozmiaru ekranu
- Flexbox — do elastycznych układów jednowymiarowych (nawigacja, karty, paski)
- CSS Grid — do złożonych dwuwymiarowych siatek i layoutów stron
- Mobile-first — do priorytetyzowania treści i wydajności na urządzeniach mobilnych
Zacznij od prostego projektu: weź dowolną stronę, którą stworzyłeś, i spróbuj zastosować te techniki krok po kroku. Responsywność to umiejętność, którą najlepiej opanować przez praktykę — każdy kolejny projekt będzie łatwiejszy.