Responsive Web Design — mobile-first i media queries w praktyce

Responsive Web Design (RWD) to podejście, w którym strona automatycznie dostosowuje się do rozmiaru ekranu. W tym artykule nauczysz się jak to robić — od mobile-first, przez media queries, po 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 — szerokość strony = szerokość urządzenia
• initial-scale=1.0 — brak domyślnego zoomu

Powyższy kod dodaj to do każdej klasycznej strony HTML, ponieważ bez tego przeglądarka mobilna wyrenderuje stronę w szerokim, wirtualnym viewportcie i pomniejszy całość.

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 — desktop */
.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 — mobile */
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
}
 
/* Rozszerzenie dla tabletu */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}
 
/* Rozszerzenie dla desktopu */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Dlaczego podejście mobile-first jest lepsze?

• Zaczynasz od najtrudniejszego. Projektowanie na małym ekranie zmusza do myślenia o ograniczeniach, ponieważ musisz zdecydować, co jest absolutnie kluczowe dla użytkownika - nie masz miejsca na zbędne elementy.
• 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).
• Czystszy i lżejszy kod. Piszesz mniej stylów, które nadpisują inne, a to oznacza mniej konfliktów w CSS, łatwiejsze utrzymanie projektu i szybsze wczytywanie strony na urządzeniach mobilnych, które pobierają tylko niezbędny kod.

Media queries w praktyce

Składnia media queries

@media (warunek) {
  /* style */
}
 
/* Przykłady */
@media (min-width: 768px) {
} /* od 768px w górę */
@media (max-width: 767px) {
} /* do 767px */
@media (min-width: 768px) and (max-width: 1023px) {
} /* zakres */

Popularne breakpoints dla responsywnych stron

/* Mobile — domyślne, bez media query */
 
/* Tablet */
@media (min-width: 768px) {
}
 
/* Desktop */
@media (min-width: 1024px) {
}
 
/* Duży desktop */
@media (min-width: 1280px) {
}

To tylko sensowny punkt startowy, ponieważ dobre breakpointy wynikają z treści i layoutu, nie z listy konkretnych urządzeń.

Inne media features w CSS

/* Orientacja */
@media (orientation: landscape) {
}
 
/* Hover */
@media (hover: hover) {
} /* desktop */
@media (hover: none) {
} /* touch */
 
/* Dark mode */
@media (prefers-color-scheme: dark) {
}
 
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
}
 
/* Print */
@media print {
}

Fluid typography i skalowanie tekstu

clamp() i płynne skalowanie fontów

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* Min: 24px, preferowane: 4% viewport, max: 48px */
}
 
p {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);
}
 
.section {
  padding: clamp(1rem, 5vw, 4rem);
}

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: 600px) 100vw, 50vw"
  alt="Opis obrazu"
/>

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

<picture>
  <source media="(min-width: 1024px)" srcset="desktop.jpg" />
  <source media="(min-width: 768px)" srcset="tablet.jpg" />
  <img src="mobile.jpg" alt="Opis" />
</picture>

Lazy loading

<img src="image.jpg" alt="..." loading="lazy" />

Nie wrzucaj loading="lazy" bezrefleksyjnie na obraz hero albo kluczowy obraz LCP. Tam zwykle chcesz ładowania od razu.

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(250px, 1fr));
  gap: 1rem;
}

Layout z media queries

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

Responsywna nawigacja na mobile

/* Mobile: ukryte menu */
.nav-links {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
}
 
.nav-links.active {
  display: flex;
}
 
.menu-toggle {
  display: block;
}
 
/* Desktop: widoczne menu */
@media (min-width: 768px) {
  .nav-links {
    display: flex;
    flex-direction: row;
    position: static;
  }
 
  .menu-toggle {
    display: none;
  }
}

// Toggle menu
const toggle = document.querySelector('.menu-toggle')
const navLinks = document.querySelector('.nav-links')
 
toggle.addEventListener('click', () => {
  navLinks.classList.toggle('active')
})

Container queries w nowoczesnym CSS

Media queries reagują na viewport, a container queries reagują na rozmiar rodzica:

.card-container {
  container-type: inline-size;
}
 
@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

To bardzo skuteczne rozwiązanie dla komponentów używanych w różnych miejscach layoutu, ponieważ zamiast pytać o szerokość całego okna, pytasz o miejsce, w którym jest komponent.

Testowanie responsywności strony

Chrome DevTools

1. F12 → Toggle Device Toolbar (Ctrl+Shift+M na Windows/Linux, Cmd+Shift+M na macOS),
2. Wybierz urządzenie lub ustaw własny rozmiar,
3. Testuj różne viewporty.

Narzędzia online

• Responsively App — widok wielu urządzeń naraz
• BrowserStack — prawdziwe urządzenia

Lista kontrolna Responsive Web Design

• Viewport meta tag,
• Obrazy max-width: 100%,
• Czytelny tekst bez zoomowania,
• Tapalne elementy min. 44x44px
• Nawigacja działa na mobile,
• Formularze działają na touch,
• Brak horizontal scroll,