Responsywność — CSS

Responsywny CSS dostosowuje układ do różnych rozmiarów ekranu.

Jak to działa?

W podejściu mobile-first zaczynasz od stylu na małe ekrany. Później dodajesz reguły @media (min-width: ...).

Przykład 1 — poznaj zapis

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

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

Na małych ekranach jest jedna kolumna, od 48em — trzy.

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: repeat(3, 1fr); }Przypisujemy wartość wybranej właściwości CSS.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Na małym ekranie jedna kolumna; od 48em trzy kolumny.

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

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

.box { width: 100%; } @media (min-width: 50em) { .box { width: 50%; } }

Wynik drugiego przykładupo uruchomieniu przykładu

Na małym ekranie 100% szerokości, na szerszym 50%.

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

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Dodaj drugi breakpoint dla czterech kolumn.