Wprowadzenie do responsywności

Preview Mode

You're viewing this material in preview mode. Sign up to track your progress and access all features.

Wprowadzenie do responsywności

In Progress

Responsywność w webdesignie

We współczesnym webdesignie responsywność strony to podstawa. Strona responsywna to taka, która dopasowuje się do różnych rozmiarów i typów ekranów – od dużych monitorów komputerowych, przez tablety, po smartfony. Zamiast tworzyć osobną wersję mobilną, projektuje się jeden serwis, który płynnie zmienia układ i wygląd elementów w zależności od dostępnej przestrzeni.

Co to znaczy w praktyce?

Na komputerze o szerokim ekranie możemy wyświetlać obok siebie kilka kolumn, duże obrazy, pełne menu na pasku nawigacyjnym. Na telefonie (wąski ekran) te same elementy powinny ułożyć się w wygodny jednokolumnowy widok: np. kolumny "złamane" jedna pod drugą, menu zwinięte w przycisk (tzw. hamburger menu – to już bardziej zaawansowane, ale ogólna idea jest taka, że elementy się przeorganizują). Tekst powinien być czytelny bez potrzeby powiększania, linki i przyciski na tyle duże, by można było w nie trafić palcem.

Różnica: komputer vs telefon

Rozdzielczość/rozmiar ekranu: Telefony mają fizycznie mały ekran, choć często wysoką rozdzielczość w pikselach. Na desktopie typowa szerokość strony to 1200px i więcej, na smartfonie efektywna szerokość bywa około 360–400px (w jednostkach CSS).
Interakcja: Na desktopie używamy myszki (łatwo najechać na mały element, jest hover), na mobile dotyku (elementy muszą być bardziej oddalone, większe, hover nie istnieje).
Orientacja: Telefony często używane w pionie (portretowo), monitory zazwyczaj w poziomie.

Meta viewport

Aby strona była świadoma szerokości urządzenia mobilnego, należy dodać w sekcji <head> specjalny znacznik:

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

Ten meta tag mówi przeglądarce mobilnej: "Ustaw wirtualną szerokość strony równą szerokości ekranu urządzenia i początkową skalę 1". Bez tego przeglądarki mobilne mogą udawać "duży ekran" i pomniejszać stronę, przez co trzeba ją ręcznie powiększać. Po jego dodaniu możemy poprzez CSS dopasowywać layout do faktycznej szerokości urządzenia.

Proste techniki responsywne

Używanie elastycznych jednostek zamiast sztywnych: zamiast pikseli warto używać procentów (%) lub jednostek względnych (em, rem). Przykład: dwie kolumny po 50% zamiast każda po 300px.
Maksymalna szerokość zamiast stałej: dla obrazów lepiej użyć max-width: 100%, żeby nie przekraczały szerokości rodzica i nie powodowały poziomego przewijania.
```
img {
    max-width: 100%;
    height: auto; /* zachowaj proporcje wysokości */
}
```
Unikanie sztywnych szerokości w pikselach: np. zamiast ustawiać menu na szerokość 800px użyj width: 100% lub max-width z wartościami procentowymi. Dla kolumn bocznych można stosować procentowe szerokości lub jednostki typu fr w CSS Grid.
Media queries (o nich więcej w kolejnej lekcji) – pozwalają zastosować inne style po przekroczeniu pewnej szerokości ekranu (np. ukryć elementy, zmienić układ).

Bardzo prosty przykład

Załóżmy, że tworzymy stronę z sekcją tekstową i obrazkiem obok (dwie kolumny). Na duży ekran chcemy układ obok siebie, na mały – jeden pod drugim. Bez wchodzenia w media queries można użyć flexboxa:

<div class="row">
    <div class="col" style="background:#ddf;">Lorem ipsum dolor sit amet...</div>
    <div class="col" style="background:#dfd;"><img src="foto.jpg" alt="Opis" /></div>
</div>

.row {
    display: flex;
    flex-wrap: wrap; /* pozwól kolumnom zawijać się */
}
.col {
    flex: 1 1 50%; /* elastyczny element: rośnie i kurczy się, baza 50% szerokości */
    padding: 10px;
}
img {
    max-width: 100%;
    height: auto;
}

W powyższym przykładzie flex: 1 1 50% oznacza, że kolumny normalnie zajmują 50% kontenera każda. flex-wrap: wrap sprawia, że jeśli kontener (ekran) jest zbyt wąski, kolumny "złamią się" i druga wejdzie poniżej pierwszej, zamiast ścieśniać się do mniejszej szerokości. Obrazek z max-width: 100% zmniejszy się razem z kolumną.

Podsumowanie

Responsywność to cecha strony, która zapewnia wygodne korzystanie na każdym urządzeniu. Osiągamy ją poprzez odpowiednie meta ustawienia oraz elastyczne podejście do CSS — używanie procentów, max-width, jednostek względnych (em, rem) i technik takich jak flexbox, grid oraz media queries zamiast sztywnych wartości w pikselach.

Back to Topic