6. Responsywność – media queries, mobile-first + nowoczesne jednostki

Strona musi dobrze wyglądać na każdym urządzeniu. Najlepsze podejście to mobile-first + jednostki, które skalują się same.

Dlaczego to ważne?

Responsywność zapewnia dostępność na mobile (70% ruchu). Nowoczesne jednostki jak clamp() redukują media queries, logical properties wspierają RTL/LTR.

Nowoczesne jednostki – must-have w 2026

/* Skalowalne i czytelne */
:root {
  --base: 1rem;                    /* 16px na desktopie, często 10–18px na mobile */
}

body {
  font-size: clamp(1rem, 3.5vw, 1.125rem);   /* min, preferowane, max */
  line-height: 1.5;
  padding-inline: clamp(1rem, 5vw, 2rem);    /* logical: start/end (zamiast left/right) */
}

h1 {
  font-size: clamp(1.8rem, 6vw, 3.5rem);
}

.card {
  padding: clamp(1rem, 4vw, 2rem);
  width: min(100%, 480px);               /* nigdy nie szersze niż 480px */
  aspect-ratio: 4 / 3;                   /* stały proporcje */
  height: 60dvh;                         /* 60% wysokości widocznego ekranu */
}

/* Container queries – zamiast media na całym oknie */
@container (min-width: 400px) {
  .karty {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

Mobile-first + media queries (klasyczny sposób)

/* Najpierw mobile */
.karty {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 4vw, 1.5rem);
}

/* Od ~tablet */
@media (min-width: 576px) {
  .karty {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .karta {
    flex: 1 1 45%;
  }
}

/* Od desktop */
@media (min-width: 992px) {
  .karty {
    max-width: 960px;
    margin: 0 auto;
  }
  .karta {
    flex: 1 1 30%;
  }
}

Container queries – przyszłość responsywności

.kontener {
  container-type: inline-size; /* definiuje kontener */
}

@container (min-width: 400px) {
  .karty {
    grid-template-columns: 1fr 1fr;
  }
}

Testowanie responsywności

W DevTools (F12): Responsive Design Mode – symuluj urządzenia, viewporty, network. Sprawdź z rotacją ekranu.

• px – stały rozmiar w pikselach (rzadko używany w 2026 na tekst i odstępy)
• % – procent względem rodzica (szerokość, wysokość, marginesy, padding)
• em – względem font-size aktualnego elementu (kaskadowe, trudne do przewidzenia)
• rem – względem font-size elementu :root / html (najbezpieczniejszy wybór na tekst i odstępy)
• vw / vh – procent szerokości / wysokości okna przeglądarki
• dvw / dvh – dynamiczne vw/vh – uwzględniają pasek adresu i paski nawigacyjne
• lvw / lvh / svh – largest/small viewport – największa/mniejsza wysokość/szerokość (ignoruje paski)
• vi / vb – viewport inline/block (logical dla RTL)
• clamp(min, prefer, max) – płynne skalowanie między wartościami
• min() / max() – wybiera mniejszą / większą wartość z listy
• aspect-ratio – wymusza proporcje elementu (np. 16/9, 4/3)

Zadanie

W pliku style.css i index.html:

• trzy karty – mobile: jedna pod drugą, tablet: dwie, desktop: trzy
• użyj clamp() na font-size tytułu i paddingu kart
• ustaw maksymalną szerokość kontenera za pomocą min(100%, 1000px)
• dodaj aspect-ratio: 3 / 2 do kart (lub zdjęć w kartach)
• opcjonalnie: ustaw wysokość sekcji na 70dvh
• dodaj container query dla kart (@container min-width: 600px – zmień na grid)