Media queries i RWD

Czego się nauczysz

Układ zaprojektowany ze sztywnymi pikselami dobrze wygląda na monitorze, a na wąskim ekranie telefonu się nie mieści albo jest nieczytelny. RWD (Responsive Web Design) to zestaw technik, dzięki którym ta sama strona dopasowuje się do szerokości ekranu.

Po tej lekcji:

• napiszesz regułę @media zmieniającą styl poniżej wybranej szerokości okna,
• wyjaśnisz różnicę między % a vw/vh,
• wyjaśnisz różnicę między em a rem.

@media – reguły obowiązujące tylko czasami

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

Reguły wewnątrz @media (max-width: 600px) { ... } obowiązują tylko wtedy, gdy okno przeglądarki ma szerokość 600px lub mniej. Poza tym warunkiem są całkowicie ignorowane, a reszta CSS działa jak zwykle.

Typowe progi szerokości (breakpointy)

• do ok. 600px – telefon,
• ok. 600–900px – tablet,
• powyżej 900px – komputer.

To wartości umowne. Nie ma jednego „oficjalnego” zestawu progów – dobiera się je do treści strony, a nie do konkretnych modeli urządzeń.

Jednostki względne: % oraz vw i vh

.polowa-okna {
    width: 50vw;
}

• % liczy się względem rozmiaru rodzica.
• vw i vh (viewport width/height) liczą się względem całego okna przeglądarki.

50vw to zawsze połowa szerokości okna, niezależnie od tego, w jakim elemencie się znajduje.

Jednostki względne: em oraz rem

html { font-size: 16px; }
.tekst-em  { font-size: 2em; }    /* 2 x rozmiar rodzica */
.tekst-rem { font-size: 2rem; }   /* zawsze 2 x 16px = 32px */

• em liczy się względem rozmiaru czcionki rodzica. Przy zagnieżdżeniach potrafi się „mnożyć” w nieoczekiwany sposób.
• rem (root em) liczy się zawsze względem czcionki głównego elementu <html>. Jest dużo bardziej przewidywalne, dlatego zwykle to ono jest pierwszym wyborem.

Jak to wygląda w praktyce

Przy oknie 900px kontener flex układa trzy elementy w wierszu. Przy oknie 400px – poniżej progu 600px – ten sam kontener dzięki @media przechodzi w układ kolumnowy, bez zmiany ani jednej linijki HTML.

Element z width: 50vw ma połowę szerokości okna w obu przypadkach: 450px przy oknie 900px i 200px przy oknie 400px.

Spróbuj sam

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

• Zmieniaj szerokość okna przeglądarki i obserwuj pasek width: 50vw oraz kontener z przykładu 3c – poniżej 600px klocki ustawią się w kolumnie.
• W pliku style.css zmień próg 600px na 800px i sprawdź, kiedy teraz zmienia się układ.
• Porównaj rozmiar tekstu w przykładach em i rem, a potem zmień font-size rodzica.

Na karcie pracy do tej lekcji:

• zadania sprawdzające 1–3 – @media, jednostki vw/vh, em/rem,
• zadania domowe 1–5 – własne progi, układ responsywny.

Sprawdź się

• Napiszę regułę @media zmieniającą styl poniżej wybranej szerokości okna.
• Wyjaśnię różnicę między % a vw/vh.
• Wyjaśnię różnicę między em a rem.

Na następnej lekcji: mobile-first – piszemy style w innej kolejności, od najmniejszego ekranu w górę.