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

Witaj ponownie w Starożytnym Egipcie! 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:

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

1. Viewport meta tag - informuje przeglądarkę o responsywności
2. Fluid grid - elastyczna siatka oparta na procentach
3. Flexible images - obrazy z max-width: 100%
4. 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:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>RWD - Responsywna strona</title>
7  <link rel="stylesheet" href="/styles.css">
8</head>
9<body>
10  <nav class="nav">
11    <div class="nav-logo">Piramida RWD</div>
12    <ul class="nav-links">
13      <li><a href="#">Start</a></li>
14      <li><a href="#">O nas</a></li>
15      <li><a href="#">Galeria</a></li>
16      <li><a href="#">Kontakt</a></li>
17    </ul>
18  </nav>
19
20  <header class="hero">
21    <h1>Responsywna Strona</h1>
22    <p>Zmniejsz okno podgladu, aby zobaczyc jak layout sie dostosowuje!</p>
23  </header>
24
25  <main class="cards">
26    <div class="card">
27      <h2>Karta 1</h2>
28      <p>Ta karta dostosowuje sie do ekranu dzieki flex-wrap i media queries.</p>
29    </div>
30    <div class="card">
31      <h2>Karta 2</h2>
32      <p>Na malych ekranach karty ukladaja sie jedna pod druga.</p>
33    </div>
34    <div class="card">
35      <h2>Karta 3</h2>
36      <p>Na duzych ekranach karty sa obok siebie w jednym rzedzie.</p>
37    </div>
38  </main>
39
40  <footer class="footer">
41    <p>&copy; 2024 Piramida RWD</p>
42  </footer>
43</body>
44</html>