Responsive Web Design oraz podejście mobile first w praktyce

Responsive Web Design (RWD) to podejście, w którym układ dostosowuje się do dostępnej przestrzeni oraz możliwości użytkownika i urządzenia. W tym artykule zobaczysz, jak łączyć mobile-first, media queries, container queries, elastyczne layouty i responsywne obrazy.

Viewport meta tag jako fundament Responsive Web Design

Bez tego tagu responsywność nie zadziała:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

• width=device-width dopasowuje szerokość viewportu do szerokości urządzenia w pikselach CSS
• initial-scale=1.0 ustawia początkową skalę dokumentu na 100%

Powyższy kod dodaj do każdej klasycznej strony HTML, ponieważ bez niego przeglądarka mobilna może wyrenderować stronę w szerokim, wirtualnym viewportcie i pomniejszyć całość. Frameworki zwykle generują tę deklarację, ale warto potwierdzić jej obecność w wynikowym HTML-u. Nie blokuj powiększania strony przez user-scalable=no.

Mobile-first vs desktop-first w Responsive Web Design

Desktop-first jako starsze podejście

Piszesz style dla desktopu, potem "naprawiasz" dla mobile:

/* Domyślne style dla dużego ekranu */
.container {
  width: 1200px;
  display: flex;
}
 
/* Nadpisanie dla mobile */
@media (max-width: 768px) {
  .container {
    width: 100%;
    flex-direction: column;
  }
}

Mobile-first jako zalecane podejście

Piszesz style dla mobile, potem "rozszerzasz" dla większych ekranów:

/* Domyślne style dla małego ekranu */
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
}
 
/* Rozszerzenie dla tabletu */
@media (min-width: 48rem) {
  .container {
    flex-direction: row;
  }
}
 
/* Rozszerzenie dla desktopu */
@media (min-width: 64rem) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Dlaczego podejście mobile-first często pomaga?

• Zaczynasz od ograniczonej przestrzeni. Musisz zdecydować, które treści i działania są najważniejsze dla użytkownika.
• Treść jest priorytetem. Zamiast upychać wszystko, co masz na desktopie, skupiasz się na najważniejszej treści i funkcjach, a to oznacza lepsze i bardziej przemyślane UX.
• Stopniowo ulepszasz, a nie psujesz. Zamiast tworzyć skomplikowany layout desktopowy i potem próbować go "naprawić" dla telefonów (degradacja), budujesz prostą, solidną podstawę mobilną i stopniowo ją rozbudowujesz (progresywne ulepszanie).
• Prostsza kaskada. Zwykle potrzebujesz mniej nadpisań, co ułatwia utrzymanie CSS. Nie jest to jednak automatyczna optymalizacja transferu, ponieważ reguły z niedopasowanych media queries nadal mogą znajdować się w pobranym arkuszu.

Mobile-first nie oznacza usuwania funkcji ani treści na telefonie. Możesz zmienić kolejność, sposób prezentacji i gęstość interfejsu, ale ważne informacje oraz działania powinny pozostać dostępne.

Nie jest to dogmat. Wewnętrzny panel używany wyłącznie na kontrolowanych stanowiskach może mieć inne priorytety. Nadal powinien jednak działać przy powiększeniu, zmianie rozmiaru okna i obsłudze klawiaturą. Mobile-first w CSS opisuje kierunek kaskady, natomiast mobile-first w projektowaniu produktu oznacza również priorytety treści i zadań. Te pojęcia są powiązane, ale nie są tym samym.

Media queries w praktyce

Składnia media queries

@media (warunek) {
  /* style */
}
 
/* Przykłady */
@media (min-width: 48rem) {
} /* od 48rem w górę */
@media (max-width: 47.999rem) {
} /* poniżej 48rem */
@media (min-width: 48rem) and (max-width: 63.999rem) {
} /* zakres */

Popularne breakpoints dla responsywnych stron

/* Mały ekran, domyślne style bez media query */
 
/* Pierwsza zmiana układu */
@media (min-width: 48rem) {
}
 
/* Druga zmiana układu */
@media (min-width: 64rem) {
}
 
/* Szeroki układ */
@media (min-width: 80rem) {
}

To wyłącznie punkt startowy. Breakpointy powinny wynikać z treści i layoutu, a nie z nazw konkretnych urządzeń. Testuj również szerokości pomiędzy breakpointami, ponieważ błędy często pojawiają się właśnie tam.

Inne media features w CSS

/* Orientacja */
@media (orientation: landscape) {
}
 
/* Precyzyjny wskaźnik obsługujący hover */
@media (hover: hover) and (pointer: fine) {
}
 
/* Dark mode */
@media (prefers-color-scheme: dark) {
}
 
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
}
 
/* Print */
@media print {
}

Media features opisują możliwości wejścia, a nie kategorię sprzętu. Laptop z ekranem dotykowym może mieć jednocześnie mysz i dotyk, dlatego nie zakładaj, że hover: none zawsze oznacza telefon. Podstawowa funkcja interfejsu nie powinna zależeć wyłącznie od hover.

Fluid typography i skalowanie tekstu

clamp() i płynne skalowanie fontów

h1 {
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
}
 
p {
  font-size: 1rem;
  line-height: 1.6;
}
 
.section {
  padding: clamp(1rem, 5vw, 4rem);
}

Sama wartość zależna od viewportu, taka jak 4vw, może zbyt słabo reagować na zmianę wielkości tekstu. Dodanie części w rem zachowuje związek z ustawieniami użytkownika. Po wdrożeniu sprawdź tekst przy powiększeniu do 200% i reflow przy 400%.

Responsywne obrazy w HTML i CSS

Podstawy

img {
  max-width: 100%;
  height: auto;
}

srcset i różne rozmiary obrazów

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 37.5rem) calc(100vw - 2rem), 50vw"
  alt="Opis obrazu"
  width="1200"
  height="800"
/>

srcset opisuje dostępne pliki, a sizes przewidywaną szerokość obrazu w layoucie. Jeśli sizes nie odpowiada rzeczywistemu CSS, przeglądarka może pobrać zbyt duży albo zbyt mały wariant. Atrybuty width i height określają proporcje i pomagają zarezerwować miejsce przed pobraniem obrazu.

picture dla różnych wariantów obrazów

<picture>
  <source media="(min-width: 64rem)" srcset="wide-crop.jpg" />
  <img
    src="mobile-crop.jpg"
    alt="Zespół omawiający projekt przy stole"
    width="800"
    height="600"
  />
</picture>

Użyj <picture>, gdy zmieniasz kadr, kompozycję albo format pliku. Jeśli różni się wyłącznie rozdzielczość tego samego obrazu, zwykle wystarczy srcset.

Lazy loading

<img
  src="image.jpg"
  alt="Opis obrazu"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
/>

Nie dodawaj loading="lazy" do obrazu hero ani innego prawdopodobnego elementu LCP. Taki obraz powinien być wykrywalny w początkowym HTML-u i ładowany bez opóźnienia. W uzasadnionym przypadku możesz nadać mu fetchpriority="high", ale nie ustawiaj wysokiego priorytetu wielu obrazom.

Responsywny layout strony

Flexbox wrap

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
 
.card {
  flex: 1 1 300px;
}

Grid auto-fit

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1rem;
}

Wewnętrzne min(100%, 250px) zapobiega przepełnieniu kontenera węższego niż 250 pikseli. Dla elementów umieszczonych w Grid lub Flexbox często przydaje się też min-width: 0, aby długi tekst nie rozszerzał kolumny.

Długie, niepodzielne wartości wymagają osobnej obsługi:

.card {
  min-width: 0;
  overflow-wrap: anywhere;
}

Layout z media queries

.layout {
  display: grid;
  grid-template-columns: 1fr;
}
 
@media (min-width: 48rem) {
  .layout {
    grid-template-columns: 250px 1fr;
  }
}
 
@media (min-width: 64rem) {
  .layout {
    grid-template-columns: 250px 1fr 200px;
  }
}

Wysokość mobilnego viewportu

Klasyczne 100vh nie zawsze zachowuje się intuicyjnie, gdy mobilna przeglądarka pokazuje albo chowa swoje paski. Nowe jednostki pozwalają wybrać oczekiwane zachowanie:

.hero {
  min-height: 100svh;
  padding: max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}
 
.fullscreen-dialog {
  min-height: 100dvh;
}

svh wykorzystuje mniejszą, stabilną wysokość viewportu, dlatego dobrze nadaje się do sekcji hero. dvh reaguje na bieżącą wysokość i sprawdza się tam, gdzie element ma wypełniać aktualnie widoczny obszar. Jednostka dynamiczna może zmieniać wartość podczas przewijania, więc unikaj jej tam, gdzie wywoływałaby irytujące przeskoki układu. Wartości safe-area-inset-* chronią istotne elementy przed wycięciami i obszarami zajętymi przez interfejs urządzenia. Jeśli chcesz rozszerzyć layout na cały fizyczny ekran urządzenia, dodaj viewport-fit=cover do wartości content w viewport meta tagu i koniecznie zachowaj bezpieczne odstępy.

Responsywna nawigacja na mobile

Samo ukrywanie i pokazywanie listy klasą CSS nie wystarcza. Przycisk powinien mieć dostępną nazwę, wskazywać kontrolowany element i aktualizować aria-expanded.

<nav aria-label="Główna nawigacja">
  <button
    class="menu-toggle"
    type="button"
    aria-expanded="false"
    aria-controls="primary-navigation"
  >
    Menu
  </button>
 
  <ul id="primary-navigation" class="nav-links">
    <li><a href="/">Start</a></li>
    <li><a href="/uslugi/">Usługi</a></li>
    <li><a href="/kontakt/">Kontakt</a></li>
  </ul>
</nav>

.nav-links {
  display: flex;
  gap: 1rem;
}
 
.menu-toggle {
  display: none;
}
 
@media (max-width: 47.999rem) {
  .js .menu-toggle {
    display: block;
  }
 
  .js .nav-links {
    display: none;
    flex-direction: column;
  }
 
  .js .nav-links.is-open {
    display: flex;
  }
}

document.documentElement.classList.add('js')
 
const toggle = document.querySelector('.menu-toggle')
const navLinks = document.querySelector('.nav-links')
 
if (toggle && navLinks) {
  const closeMenu = () => {
    navLinks.classList.remove('is-open')
    toggle.setAttribute('aria-expanded', 'false')
  }
 
  toggle.addEventListener('click', () => {
    const open = toggle.getAttribute('aria-expanded') === 'false'
    toggle.setAttribute('aria-expanded', String(open))
    navLinks.classList.toggle('is-open', open)
  })
 
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      closeMenu()
      toggle.focus()
    }
  })
}

Bez JavaScriptu lista pozostaje widoczna, więc nawigacja nadal działa. W produkcyjnym komponencie przetestuj również kolejność fokusu, zamykanie menu po zmianie trasy i zachowanie po przejściu przez breakpoint.

Container queries w nowoczesnym CSS

Media queries reagują na viewport lub cechy środowiska, natomiast container queries pozwalają komponentowi reagować na wskazany kontener:

.card-container {
  container: card / inline-size;
}
 
@container card (min-width: 25rem) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

To dobre rozwiązanie dla komponentów używanych w różnych miejscach layoutu. Kontener musi jednak mieć zadeklarowany typ, a element nie może zapytać w ten sposób o własny rozmiar. Zapytanie dotyczy jego przodka będącego query containerem.

Testowanie responsywności strony

Chrome DevTools

1. Otwórz tryb responsywny i przeciągaj krawędź viewportu zamiast sprawdzać wyłącznie gotowe presety.
2. Przetestuj szerokości tuż przed każdym breakpointem i tuż po nim.
3. Zmień orientację, powiększenie tekstu i zoom całej strony.
4. Sprawdź obsługę klawiaturą, tryb dotykowy, wolniejszą sieć oraz ograniczony procesor.

Emulacja pomaga znaleźć błędy layoutu, ale nie zastępuje prawdziwego urządzenia. Nie odwzorowuje dokładnie wydajności, klawiatury ekranowej, obszarów bezpiecznych ani zmian wysokości viewportu wywołanych paskami przeglądarki.

Narzędzia online

• Responsively App pokazuje kilka viewportów jednocześnie.
• BrowserStack udostępnia testy w chmurze na różnych przeglądarkach i urządzeniach.

Lista kontrolna Responsive Web Design

• W wynikowym HTML-u znajduje się poprawny viewport meta tag, który nie blokuje powiększania.

• Główna treść zachowuje reflow przy szerokości 320 pikseli CSS i nie wymaga przewijania w dwóch kierunkach.

• Tekst pozostaje czytelny przy powiększeniu do 200%, a layout działa również przy zoomie 400%.

• Interaktywne cele mają co najmniej 24 × 24 piksele CSS albo wymagane odstępy. Dla najważniejszych kontrolek warto dążyć do 44 × 44 pikseli.

• Nawigacja, formularze, modale i komunikaty działają za pomocą dotyku, myszy oraz klawiatury.

• Obrazy mają poprawne proporcje, srcset, sizes i strategię ładowania odpowiednią do ich położenia.

• Długie adresy, nazwy, komunikaty błędów i tłumaczenia nie rozsadzają kontenerów.

• Sticky header, baner zgody i klawiatura ekranowa nie zasłaniają fokusu ani najważniejszych przycisków.

• Wyjątki wymagające przewijania w dwóch wymiarach, takie jak szerokie tabele, mapy i diagramy, mają własny kontrolowany kontener.