Responsywność i RWD - Dostosowanie Strony do Każdego Ekranu

Witaj ponownie w Starożytnym Egipcie, @name! Tak jak egipscy architekci projektowali budowle, które musiały przetrwać tysiąclecia i służyć różnym celom, tak my musimy tworzyć strony internetowe, które doskonale wyglądają na każdym urządzeniu - od małego smartfona po wielki monitor.

RWD (Responsive Web Design) to podejście, w którym strona automatycznie dostosowuje swój wygląd do rozmiaru ekranu użytkownika. Zamiast tworzyć osobne strony dla telefonów i komputerów, tworzymy jedną stronę, która elastycznie się zmienia.

Viewport Meta Tag - fundament responsywności

Zanim zaczniemy pisać responsywne style, musimy poinformować przeglądarkę mobilną, że nasza strona jest przygotowana na różne ekrany. Robimy to za pomocą specjalnego znacznika

<meta>

w sekcji

<head>

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

Bez tego tagu przeglądarka mobilna wyświetli stronę tak, jakby była przeznaczona na desktop (szerokość ~980px), a potem ją pomniejszy. Z tym tagiem przeglądarka wie, że ma użyć rzeczywistej szerokości ekranu urządzenia.

Media Queries - różne style dla różnych ekranów

Media queries to reguły CSS, które pozwalają stosować różne style w zależności od właściwości urządzenia, najczęściej od szerokości ekranu. Używamy do tego dyrektywy

@media

1/* Style bazowe - dla wszystkich ekranów */
2.container {
3  width: 100%;
4  padding: 10px;
5}
6
7/* Style dla tabletów (768px i więcej) */
8@media (min-width: 768px) {
9  .container {
10    width: 750px;
11    margin: 0 auto;
12    padding: 20px;
13  }
14}
15
16/* Style dla desktopów (1024px i więcej) */
17@media (min-width: 1024px) {
18  .container {
19    width: 960px;
20    padding: 30px;
21  }
22}
23
24/* Style dla dużych ekranów (1200px i więcej) */
25@media (min-width: 1200px) {
26  .container {
27    width: 1140px;
28  }
29}

Zwróć uwagę na

min-width

- oznacza to, że style zadziałają od danej szerokości w górę. To jest podejście mobile-first.

Mobile-First vs Desktop-First

Istnieją dwa główne podejścia do pisania responsywnych stylów:

Mobile-first (zalecane) - zaczynamy od stylów dla najmniejszych ekranów i dodajemy style dla coraz większych za pomocą

min-width

1/* Bazowe style = mobile */
2.cards {
3  display: flex;
4  flex-direction: column;
5  gap: 10px;
6}
7
8/* Tablet */
9@media (min-width: 768px) {
10  .cards {
11    flex-direction: row;
12    flex-wrap: wrap;
13  }
14  .cards .card {
15    width: 48%;
16  }
17}
18
19/* Desktop */
20@media (min-width: 1024px) {
21  .cards .card {
22    width: 31%;
23  }
24}

Desktop-first - zaczynamy od dużych ekranów i zmniejszamy za pomocą

max-width

1/* Bazowe style = desktop */
2.cards .card {
3  width: 31%;
4}
5
6@media (max-width: 1023px) {
7  .cards .card {
8    width: 48%;
9  }
10}
11
12@media (max-width: 767px) {
13  .cards {
14    flex-direction: column;
15  }
16  .cards .card {
17    width: 100%;
18  }
19}

Mobile-first jest rekomendowane, ponieważ najpierw obsługujemy najbardziej ograniczone urządzenia, a potem dodajemy funkcje na większych ekranach.

Typowe Breakpointy

Breakpointy to punkty graniczne, w których układ strony się zmienia. Oto najczęściej stosowane:

| Urządzenie | Breakpoint | |------------|-----------| | Smartfon | do 576px | | Tablet | 768px | | Laptop | 992px | | Desktop | 1200px | | Duży ekran | 1400px |

Jednostki Responsywne

W RWD zamiast stałych pikseli warto używać jednostek względnych:

% - procent względem elementu rodzica
vw / vh - procent szerokości / wysokości okna przeglądarki (viewport)
rem - względem rozmiaru czcionki elementu root (
```
<html>
```
)
em - względem rozmiaru czcionki elementu rodzica

1/* Stałe - NIE responsywne */
2.box { width: 400px; font-size: 16px; }
3
4/* Responsywne - dostosowują się do ekranu */
5.box {
6  width: 90%;          /* 90% szerokości rodzica */
7  max-width: 600px;    /* ale nie więcej niż 600px */
8  font-size: 1rem;     /* względem root font-size */
9  padding: 2vw;        /* 2% szerokości viewportu */
10  min-height: 50vh;    /* minimum 50% wysokości ekranu */
11}

Flexbox i flex-wrap w responsywności

Właściwość

flex-wrap: wrap

sprawia, że elementy flexbox automatycznie przechodzą do nowej linii, gdy zabraknie miejsca. To jeden z najprostszych sposobów na stworzenie responsywnego layoutu:

1.gallery {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 16px;
5}
6
7.gallery-item {
8  flex: 1 1 250px;
9  /* flex-grow: 1 - element rośnie */
10  /* flex-shrink: 1 - element się kurczy */
11  /* flex-basis: 250px - minimalna szerokość */
12}

Dzięki

flex: 1 1 250px

każdy element ma minimalną szerokość 250px. Gdy ekran jest za wąski, elementy automatycznie przeskakują do następnego wiersza - bez potrzeby pisania media queries!

Responsywna nawigacja

Nawigacja to element, który najczęściej zmienia się między mobile a desktop:

1.nav {
2  display: flex;
3  flex-direction: column;
4}
5
6.nav-links {
7  display: none; /* Ukryte na mobile */
8}
9
10.nav-toggle {
11  display: block; /* Hamburger menu na mobile */
12}
13
14@media (min-width: 768px) {
15  .nav {
16    flex-direction: row;
17    justify-content: space-between;
18    align-items: center;
19  }
20
21  .nav-links {
22    display: flex;
23    gap: 20px;
24  }
25
26  .nav-toggle {
27    display: none; /* Ukryj hamburger na desktop */
28  }
29}

Podsumowanie kluczowych elementów RWD

Viewport meta tag - informuje przeglądarkę o responsywności
Fluid grid - elastyczna siatka oparta na procentach
Flexible images - obrazy z
```
max-width: 100%
```
Media queries - różne style dla różnych rozmiarów ekranu

Te cztery filary RWD to jak cztery ściany egipskiej piramidy - każdy jest niezbędny, aby konstrukcja była stabilna i trwała na wszystkich urządzeniach.

Praktyczne zastosowanie

Przećwicz responsywność w edytorze poniżej. Spróbuj zmienić rozmiary okna podglądu, aby zobaczyć jak layout się dostosowuje:

Vai a CodeWorlds→