TablicaPro / karta pracy ucznia / CSS

Media queries — lekcja tworzenia responsywnej strony

Klasa: __________ Numer: __________ Data: __________

Pracuj w przygotowanym pliku. Po każdej zmianie zapisz go i sprawdź rezultat.

Kod do rozpoczęcia pracy

@media (max-width: 600px) {
  .uklad {
    flex-direction: column;
  }
}

Zadanie 1

Ustaw .uklad jako Flexbox z odstępem 16 px, a .kolumna z flex: 1 i wysokością 60 px. Zmierz szerokość kolumn przy oknie 800 px.

Zadanie 2

Dopisz regułę @media (max-width: 600px), w której .uklad dostaje flex-direction: column.

Zadanie 3

Zmierz układ przy szerokości okna 800, 601, 600 i 500 px. Zapisz wartość matchMedia("(max-width: 600px)").matches i to, czy kolumny stoją obok siebie.

Sprawdź przed oddaniem

Zadanie 1: Flexbox z odstępem i kolumnami 2 pkt, pomiar 1 pkt; zadanie 2: @media z flex-direction column 2 pkt; zadanie 3: cztery pomiary 2 pkt, matchMedia 1 pkt; wyjaśnienie punktu granicznego 1 pkt; meta viewport 1 pkt. Razem 10 pkt.

Jaką zmianę w kodzie potrafisz samodzielnie wyjaśnić?

Drukuj kartę pracy