Poprawna odpowiedź wskazuje na jedną z kluczowych zasad projektowania responsywnych stron WWW: elementy, w tym obrazy, powinny skalować się razem z szerokością dostępnej przestrzeni. Definiowanie rozmiarów obrazów w procentach (np. width: 100% w CSS) powoduje, że grafika dopasowuje się do szerokości kontenera, a nie trzyma sztywnego rozmiaru w pikselach. Dzięki temu na dużym monitorze obraz może być szeroki, a na ekranie telefonu automatycznie się zmniejszy, nie rozwalając układu i nie powodując konieczności przewijania w poziomie. W praktyce często łączy się zapis procentowy z dodatkowymi ograniczeniami, np. img {max-width: 100%; height: auto;}. Taki zapis to standardowa, podręcznikowa technika w responsive web design. Z mojego doświadczenia to jedna z pierwszych rzeczy, jaką sprawdza się, gdy strona „rozjeżdża się” na telefonach. Procentowe wartości dobrze współpracują z elastycznymi siatkami (flexbox, grid), media queries oraz z tzw. fluid layout, czyli płynnymi układami. Warto też wiedzieć, że sam procentowy rozmiar obrazów to nie wszystko. W nowoczesnych projektach stosuje się dodatkowo atrybuty srcset i sizes, aby serwer serwował różne wersje obrazów w zależności od gęstości pikseli i szerokości ekranu. Jednak fundament pozostaje ten sam: unikanie sztywnych, pikselowych szerokości i korzystanie z jednostek względnych, takich jak procenty, vw (viewport width) czy em/rem. Jest to zgodne z dobrymi praktykami branżowymi i zaleceniami twórców frameworków typu Bootstrap czy Tailwind, gdzie wszystkie komponenty są tworzone właśnie z myślą o elastycznym skalowaniu na różnych urządzeniach.
Temat responsywności bardzo często jest mylony z pojedynczymi trikami typu „użyj takiej czcionki” albo „narysuj stronę w tabeli i będzie działać wszędzie”. Niestety to tak nie działa. Responsywność polega na tym, żeby układ i wszystkie elementy strony płynnie dopasowywały się do różnych szerokości i rozdzielczości ekranów: od smartfona, przez tablet, po duży monitor. Podstawą są elastyczne jednostki, media queries w CSS oraz przemyślana struktura HTML. Pomysł, że wystarczy stosować jedynie czcionki bezszeryfowe, nie ma związku z responsywnością jako taką. Wybór fontu to bardziej kwestia czytelności i estetyki interfejsu. Oczywiście fonty bezszeryfowe typu Roboto czy Open Sans często wyglądają lepiej na ekranach, ale sama zmiana kroju pisma nie spowoduje, że layout zacznie się dopasowywać do szerokości okna. To typowy błąd myślowy: mylenie „nowoczesnego wyglądu” z „responsywnym zachowaniem”. Strona może być wizualnie nowoczesna, a jednocześnie kompletnie nierespnsywna. Drugie nieporozumienie to projektowanie układu strony wyłącznie za pomocą tabel. Tabele nadają się do prezentowania danych tabelarycznych, ale od lat są uznawane za złą praktykę przy budowie layoutu. Trudno je elastycznie przełamywać na mniejszych ekranach, są mało semantyczne i nie współpracują dobrze z technologiami asystującymi. Standardy W3C i dobre praktyki front-endu mówią jasno: do układu używamy CSS (flexbox, grid), a nie tabel. Strona z layoutem na tabelach będzie raczej sztywna i problematyczna w utrzymaniu, niż responsywna. Kolejny częsty błąd to definiowanie rozmiarów obrazów wyłącznie w pikselach. Sztywne wartości typu width: 800px sprawiają, że obraz ma identyczną szerokość niezależnie od urządzenia. Na dużym ekranie może wyglądać okej, ale na telefonie taki obraz jest po prostu za szeroki, powoduje poziomy scroll albo wymusza skalowanie całej strony. Responsywność wymaga unikania takich sztywnych wartości i zastępowania ich jednostkami względnymi, jak procenty, vw czy elastyczne maksymalne szerokości. Gdy ktoś upiera się przy pikselach, zwykle wynika to z przyzwyczajenia z ery statycznych stron i braku zrozumienia, jak działa współczesny CSS. Kluczowe jest myślenie w kategoriach „jak element ma się zachowywać przy różnych szerokościach”, a nie „ile dokładnie pikseli ma mieć zawsze i wszędzie”.