Responsywność i podejście mobile-first

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• wyjaśnić, czym jest responsywność w praktyce frontendowej,
• zaplanować style bazowe dla małego ekranu,
• rozszerzać layout przez @media (min-width: 760px),
• stosować elastyczne kontenery i bezpieczne szerokości,
• unikać poziomego przewijania oraz zbyt ciasnych elementów UI.

Kontekst praktyczny

Responsywność nie oznacza tylko „ładnie na telefonie”. Oznacza, że treść, nawigacja, karty, formularze i media dopasowują się do dostępnej przestrzeni bez utraty czytelności.

Czym jest responsywność

Responsywny interfejs dopasowuje się do różnych szerokości ekranu, gęstości treści i sposobów obsługi. Użytkownik nie powinien powiększać strony, przewijać poziomo ani zgadywać, gdzie trafił układ.

W CSS responsywność budujesz przez elastyczne jednostki, kontenery z ograniczeniem szerokości, zawijanie layoutu, media queries oraz rozsądne wartości minimalne i maksymalne.

Podejście mobile-first

Mobile-first oznacza, że bazowe style piszesz dla małego ekranu. Dopiero później, przez media queries z min-width, rozszerzasz układ na większe viewporty.

Kopiuj.lesson-grid {
  display: grid;
  gap: 1rem;
}

.lesson-card {
  padding: 1rem;
}

@media (min-width: 760px) {
  .lesson-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lesson-card {
    padding: 1.5rem;
  }
}

Ten wzorzec jest przewidywalny: mały ekran dostaje prosty układ jednej kolumny, a desktop zyskuje więcej kolumn dopiero wtedy, gdy ma na nie miejsce.

Viewport i skala strony

Responsywność zaczyna się od poprawnego viewportu w HTML. Ten projekt używa standardowego wpisu:

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

Dzięki temu szerokość strony odpowiada realnej szerokości urządzenia. Bez tego telefony mogą renderować stronę jak szeroki desktop i sztucznie ją pomniejszać.

Elastyczne kontenery

Kontener powinien mieć miejsce na oddech na małym ekranie i rozsądne ograniczenie szerokości na desktopie. W tym projekcie robi to klasa .container:

.container {
  width: min(1120px, 92%);
  margin-inline: auto;
}

92% zostawia marginesy przy krawędziach telefonu, a 1120px pilnuje, aby treść na szerokim monitorze nie rozciągnęła się za bardzo.

Obrazy i media

Obrazy są częstym źródłem poziomego overflow. Minimalny bezpieczny wzorzec to:

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

Gdy obraz ma wypełniać konkretny kadr, często dochodzi object-fit: cover oraz stałe proporcje przez aspect-ratio.

Layout od jednej kolumny

Najprostszy i najbezpieczniejszy start dla małego ekranu to jedna kolumna. Użytkownik przewija pionowo, a elementy mają pełną czytelną szerokość.

Dopiero na większych ekranach możesz zamienić listę kart w siatkę, panel w układ dwukolumnowy albo nawigację mobilną w poziome menu.

Pierwszy breakpoint

Breakpoint to punkt, w którym layout zmienia zachowanie. Nie wybieraj go dlatego, że istnieje konkretne urządzenie. Wybierz go wtedy, gdy treść realnie potrzebuje więcej miejsca.

Kopiuj.feature-list {
  display: grid;
  gap: 1rem;
}

.feature-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #dbe2f1;
  border-radius: 12px;
}

@media (min-width: 760px) {
  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .feature-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

Ten kod rośnie stopniowo: jedna kolumna na telefonie, dwie na średnim ekranie i trzy dopiero na szerokim widoku.

Demo mobile-first

Poniższa wizualizacja pokazuje ten sam komponent w dwóch kontekstach. Na telefonie karty są w jednej kolumnie, a na desktopie przechodzą w szerszą siatkę.

Interpretacja: HTML może pozostać taki sam. Zmienia się tylko sposób rozmieszczenia treści, gdy viewport daje więcej miejsca.

Najczęstsze błędy początkujących

• Projektowanie tylko pod desktop i późniejsze „ściskanie” layoutu na telefon.
• Ustawianie sztywnych szerokości typu width: 1200px na głównych kontenerach.
• Zapominanie o min-width: 0 w kartach i kolumnach, gdy tekst wypycha układ.
• Dodawanie zbyt wielu breakpointów bez realnej potrzeby.
• Brak testu poziomego overflow na małym viewportcie.
• Zmniejszanie tekstu zamiast uproszczenia układu i poprawienia odstępów.

Mini zadanie

Zbuduj responsywną sekcję trzech kart w podejściu mobile-first.

• Utwórz kontener .feature-list i trzy karty.
• Domyślnie ustaw jedną kolumnę oraz gap.
• Dodaj breakpoint od 760px, który zmienia układ na dwie kolumny.
• Dodaj drugi breakpoint od 1024px, który pokazuje trzy kolumny.
• Sprawdź widok przy szerokościach około 390px, 768px i 1280px.

Checklista

• Wiem, że mobile-first oznacza style bazowe dla małego ekranu.
• Potrafię rozszerzać layout przez @media (min-width: 760px).
• Umiem zaprojektować kontener, który ma margines na telefonie i limit szerokości na desktopie.
• Wiem, jak zabezpieczyć obrazy przed wypychaniem layoutu.
• Nie dobieram breakpointów wyłącznie pod nazwy urządzeń.
• Sprawdzam, czy strona nie ma poziomego przewijania.

Podsumowanie lekcji

Responsywność zaczyna się od prostego, czytelnego układu na małym ekranie. Mobile-first pozwala budować style od najtrudniejszego kontekstu, a potem rozszerzać layout na większe viewporty bez walki ze sztywnymi szerokościami.

Kolejny krok roadmapy to media queries i breakpointy: jak planować punkty zmiany layoutu i nie mnożyć reguł bez potrzeby.