Responsywny design i media queries
Strona, która świetnie wygląda na każdym urządzeniu
Responsywny design — jak woda
Woda przyjmuje kształt każdego naczynia. Responsywna strona robi to samo: na telefonie pokazuje jedną kolumnę, na tablecie dwie, na desktopie trzy. Zawartość nie jest przycinana ani nie wychodzi poza ekran.
Meta tag viewport — obowiązkowy!
<meta name="viewport" content="width=device-width, initial-scale=1.0">Bez tego mobilna przeglądarka skaluje stronę jak desktop (wszystko malutkie). Z nim — strona zajmuje rzeczywistą szerokość ekranu.
Media queries — style dla konkretnych rozmiarów
/* Mobile First — zacznij od mobile */
.cards { grid-template-columns: 1fr; } /* 1 kolumna na telefonie */
@media (min-width: 640px) {
.cards { grid-template-columns: repeat(2, 1fr); } /* tablet — 2 */
}
@media (min-width: 1024px) {
.cards { grid-template-columns: repeat(3, 1fr); } /* desktop — 3 */
}Mobile First — właściwe podejście: zacznij od mobile, potem dodaj złożoność dla większych ekranów przez min-width.
Popularne breakpointy
| Nazwa | min-width | Dla |
|---|---|---|
| sm | 640px | Duże telefony |
| md | 768px | Tablety |
| lg | 1024px | Laptopy |
| xl | 1280px | Duże monitory |
Płynna typografia z clamp()
/* clamp(minimum, idealne, maksimum) */
h1 {
font-size: clamp(1.75rem, 5vw, 3rem);
/* na telefonie: 1.75rem, na desktopie: 3rem, pomiędzy — proporcjonalnie */
}vw = 1% szerokości okna. 5vw = 5% szerokości ekranu.
Mobile First + trzy breakpointy. Cały układ adaptuje się od 1 do 3 kolumn z minimalnym kodem.
Sprawdź responsywność w DevTools przeglądarki: przycisk Toggle Device Toolbar (Ctrl+Shift+M w Chrome). Możesz wybrać konkretny telefon lub ręcznie zmieniać szerokość.