Responsywność (ang. Responsive Web Design, w skrócie RWD) to podejście do budowania stron, w którym jeden ten sam kod HTML automatycznie dopasowuje układ i wygląd do rozmiaru ekranu — od telefonu trzymanego w jednej ręce, przez tablet, po szeroki monitor 4K. Nie robisz osobnej wersji „mobilnej” i osobnej „komputerowej”: masz jeden serwis, który płynnie się przebudowuje. Termin spopularyzował Ethan Marcotte w 2010 roku i od tamtej pory to praktycznie standard, a nie fanaberia.
Jak to działa
Responsywność stoi na trzech filarach. Pierwszy to elastyczne siatki — zamiast sztywnych szerokości w pikselach używasz jednostek względnych (procenty, fr w CSS Grid, rem). Drugi to elastyczne media, czyli obrazki i wideo, które nie wylewają się poza kontener (klasyczne img { max-width: 100%; }). Trzeci to media queries — reguły CSS, które włączają inny styl po przekroczeniu określonego progu szerokości (tzw. breakpointa).
Warunkiem wstępnym jest jeszcze meta tag w sekcji : . Bez niego telefon udaje, że ma ekran szeroki na ~980 px i pomniejsza całą stronę — wtedy nawet najlepsze media queries nic nie dają.
Przykład z praktyki
Załóżmy, że masz galerię produktów. Na telefonie chcesz jedną kolumnę, na tablecie dwie, na desktopie cztery. W czystym CSS:
.grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } a niżej @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } i jeszcze @media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }.
Jeśli używasz frameworka jak Tailwind CSS, robisz to samo prefiksami: grid-cols-1 md:grid-cols-2 xl:grid-cols-4. Do podglądu nie potrzebujesz telefonu — w Chrome wciskasz F12, klikasz ikonę „Toggle device toolbar” (Ctrl+Shift+M) i przełączasz rozdzielczości na żywo.
Częste błędy
- Brak meta viewport — najczęstszy powód, dla którego „responsywna” strona na telefonie wygląda jak miniaturka desktopu.
- Projektowanie od desktopu zamiast mobile first — łatwiej dokładać style w górę (
min-width) niż obcinać w dół. - Mylenie responsywności z adaptacją — RWD płynnie się skaluje, podejście adaptacyjne (AWD) serwuje kilka sztywnych layoutów dla wybranych szerokości.
- Stałe wysokości i jednostka
vhna mobile — paski przeglądarki potrafią rozjechać layout; coraz częściej ratuje to jednostkadvh.
Warto też wiedzieć, że nowoczesny CSS idzie dalej niż media queries: container queries pozwalają reagować na szerokość kontenera, a nie całego okna, więc komponent jest responsywny niezależnie od tego, gdzie go wstawisz.
Pojęcia powiązane: media queries, breakpoint, viewport, mobile first, CSS Grid, Flexbox, container queries, fluid typography, Tailwind CSS.