Mobile-first — CSS

W podejściu mobile-first najpierw piszesz reguły dla wąskiego ekranu.

Cel lekcji

Poznać zagadnienie „Mobile-first”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

Następnie dodajesz @media (min-width: ...), aby rozbudować układ przy większej szerokości.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Wygląd strony w przeglądarce

.cards { display: grid; grid-template-columns: 1fr; }
@media (min-width: 48em) {
  .cards { grid-template-columns: 1fr 1fr; }
}

Przeczytaj kod linijka po linijce

.cards { display: grid; grid-template-columns: 1fr; }Ustawiamy sposób rozmieszczania elementów.
@media (min-width: 48em) {Kontrolujemy wymiary elementu.
.cards { grid-template-columns: 1fr 1fr; }Przypisujemy wartość wybranej właściwości CSS.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Na mobile: jedna kolumna; od 48em: dwie kolumny.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Dodaj trzecią kolumnę od 75em.