Mobile-first

Czego się nauczysz

Na poprzedniej lekcji pisaliśmy najpierw styl dla dużego ekranu, a potem @media (max-width: ...) nadpisywał go dla węższych okien. To podejście nazywa się desktop-first. Dziś odwracamy kolejność.

Po tej lekcji:

• napiszesz styl bazowy od razu dla telefonu, bez żadnego @media,
• dodasz @media (min-width: ...), żeby rozbudować układ na większym ekranie,
• wyjaśnisz różnicę między podejściem mobile-first a desktop-first.

Mobile-first – odwrócona kolejność

/* styl bazowy = telefon, bez @media */
.karty { display: flex; flex-direction: column; }

@media (min-width: 600px) {
    .karty { flex-direction: row; }
}

W mobile-first styl bez żadnego @media to od razu styl dla najmniejszego ekranu. Kolejne reguły @media (min-width: ...) dokładają zmiany dla coraz szerszych okien.

Każda kolejna reguła rozbudowuje poprzednią, zamiast nadpisywać ją wyjątkiem.

max-width kontra min-width

• Desktop-first (lekcja 3): warunek @media (max-width: X), styl bazowy jest dla najszerszego ekranu.
• Mobile-first (dziś): warunek @media (min-width: X), styl bazowy jest dla najwęższego ekranu.

Obu podejść nie łączy się w jednym projekcie dla tej samej właściwości. Wybiera się jedno i trzyma się go konsekwentnie.

Dlaczego mobile-first jest zwykle lepszym wyborem

Telefon ma najmniej miejsca i najprostszy układ: jedna kolumna, elementy jeden pod drugim. To naturalny punkt startowy.

Kolejne @media (min-width: ...) tylko dodają możliwości – więcej kolumn, układ w wierszu – zamiast komplikować rozbudowany styl na komputer wyjątkami.

Kilka progów naraz

.siatka { display: grid; grid-template-columns: 1fr; }

@media (min-width: 600px) {
    .siatka { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
    .siatka { grid-template-columns: repeat(3, 1fr); }
}

Można mieć więcej niż jeden próg min-width – każdy dokłada kolejny poziom rozbudowy. Siatka zaczyna od jednej kolumny, przechodzi do dwóch przy 600px, a do trzech przy 900px.

Jak to wygląda w praktyce

• 375px (telefon): kontener flex jest kolumnowy, siatka ma jedną kolumnę. To styl bazowy, bez żadnego @media.
• 700px (tablet): kontener flex przechodzi w wiersz, a siatka w dwie kolumny.
• 1000px (komputer): siatka dodatkowo przechodzi w trzy kolumny.

Każdy próg dokładał kolejną zmianę – nic nie zostało nadpisane.

Spróbuj sam

Do tego tematu jest kod: index.html i style.css. Tej lekcji dotyczy część 4 strony, przykłady 4a i 4b.

• Zwężaj i poszerzaj okno przeglądarki i licz, ile kolumn ma siatka przy każdej szerokości.
• W pliku style.css dopisz czwarty próg, na przykład min-width: 1200px z czterema kolumnami.
• Porównaj przykład 3c (desktop-first) z 4a (mobile-first): oba dają ten sam efekt, ale są napisane w odwrotnej kolejności.

Na karcie pracy do tej lekcji:

• zadania sprawdzające 1–3 – styl bazowy telefonu, min-width, kilka progów naraz,
• zadania domowe 1–5 – przepisanie desktop-first na mobile-first, pełny układ responsywny.

Sprawdź się

• Napiszę styl bazowy od razu dla telefonu, bez żadnego @media.
• Dodam @media (min-width: ...), żeby rozbudować układ na większym ekranie.
• Wyjaśnię różnicę między podejściem mobile-first a desktop-first.

Na następnej lekcji: sprawdzian – podsumowanie Flexboksa, Gridu i RWD z całego tematu.