Responsywność (RWD) i Media Queries

RWD (Responsive Web Design) to podejście polegające na projektowaniu strony tak, aby wyglądała i działała dobrze na każdym urządzeniu – od potężnego monitora 4K po mały ekran smartfona. W erze mobilnej, CKE dorzuciło sprawdzanie RWD do wymagań egzaminacyjnych.

Niezbędny Meta Tagi

Zanim rzucisz się w wir pisania w CSS, upewnij się, że w HTML w sekcji <head> masz ten magiczny znacznik:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bez tego urządzenia mobilne "skłamią" o swojej szerokości ekranu, na siłę skalując całą stronę (jak oddalona stara gazeta). Ten znacznik mówi: Ekran telefonu to 100% szerokości urządzenia – układaj wszystko naturalnie!.

Media Queries (@media)

Media Queries to nic innego jak instrukcja warunkowa (if) dla CSS. Mówisz w niej: "Jeżeli szerokość ekranu spadnie poniżej 800px, zaaplikuj następujące zasady..."

/* GŁÓWNE STYLE (dla desktopu) */
.baner {
    width: 1000px;
    background-color: blue;
}

/* REGUŁY RESPONSYWNE */
@media screen and (max-width: 800px) {
    /* To zostanie zaaplikowane tylko na telefonach i tabletach! */
    .baner {
        width: 100%; /* Rozciągamy na cały ekran telefonu */
        background-color: red; /* Zmiana koloru */
    }
}

Złota zasada: Reguły @media zawsze umieszczaj na samym końcu pliku CSS! Pamiętasz Kaskadowość? Kod czytany jest z góry na dół, więc reguła mobilna na samym dole grzecznie nadpisze to, co ustawiłeś dla dużych monitorów wyżej.

Jednostki responsywne

Zamiast twardych pikseli (px), używaj jednostek relatywnych:

• % – Procent szerokości/wysokości rodzica. Np. <div style="width: 50%;"> zajmie zawsze połowę dostępnego ekranu, bez względu czy masz monitor czy telefon.
• vw (Viewport Width) / vh (Viewport Height) – Związane bezpośrednio z oknem. 100vw to pełna szerokość ekranu, nawet jeśli ten div jest głęboko ukryty w innych elementach.
• rem / em – Używane do rozmiarów czcionek (relatywne do rozmiaru podstawowego w <html/>). W nowym kodzie używa się wyłącznie rem, by tekst był dostępny dla ludzi powiększających literki w systemie operacyjnym!

CKE często prosi: "Układ lewego i prawego bloku w CSS (Float lub Flex) na komputerach, ale poniżej szerokości 700px klocki mają ułożyć się jeden pod drugim (na 100% szerokości)". Mając @media, to pikuś!