Kurs HTML i CSS · Moduł 5: Responsywność
Responsywność w CSS
W tej lekcji4
Ta sama strona trafia dziś na telefon trzymany w jednej dłoni, na tablet i na szeroki monitor. Układ, który na komputerze mieści trzy kolumny, na telefonie zamienia się w nieczytelny ścisk. Egipski architekt przed budową zawsze pytał: ile mamy miejsca? W tej lokacji nauczysz strony zadawać to samo pytanie.
Czego się nauczysz
- sprawdzać szerokość ekranu za pomocą media queries,
- łączyć warunki i dobierać breakpointy dla telefonu, tabletu i komputera,
- ustawiać viewport, dzięki któremu telefon pokazuje stronę w prawdziwej skali,
- budować płynne kontenery i używać jednostek
vwivh, - dopasowywać obrazy do ekranu i projektować w podejściu mobile-first,
- złożyć to wszystko w responsywną galerię.
Wprowadzenie
Responsywność w CSS odnosi się do zdolności strony internetowej do dynamicznego dostosowywania się do różnych rozmiarów ekranu i urządzeń, takich jak komputery stacjonarne, laptopy, tablety i smartfony. Dzięki responsywnemu projektowaniu strona może oferować optymalne wrażenia użytkownika niezależnie od tego, jak jest wyświetlana.
Media Queries
Podstawowym narzędziem do tworzenia responsywnego designu w CSS są tak zwane media queries. Pozwalają one stosować różne style w zależności od cech urządzenia, takich jak szerokość ekranu, orientacja i rozdzielczość. Każde zaczyna się od @media, potem w nawiasie podajesz warunek, a w klamrach reguły, które mają działać tylko wtedy, gdy warunek jest spełniony. Warunek min-width znaczy: od tej szerokości wzwyż, a max-width: do tej szerokości włącznie.
Przykład: Zmiana stylu na różnych szerokościach ekranu
Możesz użyć media queries, aby zastosować różne style w zależności od szerokości ekranu. Oto dwa bloki, które dzielą ekrany na węższe i szersze niż 600 pikseli:
1/* Style dla ekranów o szerokości 600px lub większej */
2@media (min-width: 600px) {
3 .container {
4 width: 80%;
5 margin: 0 auto;
6 }
7}
8
9/* Style dla ekranów o szerokości mniejszej niż 600px */
10@media (max-width: 599px) {
11 .container {
12 width: 100%;
13 padding: 10px;
14 }
15}W powyższym przykładzie, dla ekranów o szerokości 600px lub większej, kontener ma szerokość 80% i wyśrodkowane marginesy. Dla ekranów o szerokości mniejszej niż 600px kontener ma pełną szerokość i dodatkowe wypełnienie. Zwróć uwagę na 599px w drugim warunku: oba warunki obejmują swoją wartość graniczną, więc gdyby drugi też miał 600px, przy dokładnie tej szerokości zadziałałyby oba bloki naraz.
Przykład: Zmiana kierunku układu dla tabletów i smartfonów
Możesz również użyć media queries w połączeniu z Flexboxem, aby zmienić układ w zależności od rozmiaru ekranu. Kontener domyślnie układa elementy w rzędzie, a na węższym ekranie przechodzi w kolumnę:
1.container {
2 display: flex;
3 flex-direction: row; /* Domyślny układ dla większych ekranów */
4}
5
6/* Dla ekranów o szerokości mniejszej niż 768px, zmiana kierunku na kolumnę */
7@media (max-width: 768px) {
8 .container {
9 flex-direction: column;
10 }
11}W tym przypadku dla ekranów o szerokości do 768px kierunek układu zmienia się na kolumnę. Kod HTML pozostaje ten sam, zmienia się wyłącznie sposób jego ułożenia.
Łączenie warunków
Czasem styl ma działać tylko w określonym przedziale, na przykład wyłącznie na tabletach. Wtedy łączysz dwa warunki słowem and, a reguły zadziałają tylko wtedy, gdy oba są spełnione:
1/* Tablet: od 768px do 1024px */
2@media (min-width: 768px) and (max-width: 1024px) {
3 .container {
4 width: 90%;
5 margin: 0 auto;
6 }
7}Na telefonie i na szerokim monitorze ten blok się nie włączy, bo zawsze jeden z warunków jest fałszywy. Takie progi nazywamy breakpointami. Popularny podział to telefony do 767px, tablety od 768px do 1024px i komputery od 1025px, ale to umowa, a nie standard. Moja rada: stawiaj breakpoint tam, gdzie twój układ zaczyna się psuć, a nie tam, gdzie kończy się konkretny model telefonu.
Podsumowanie
Responsywność w CSS jest kluczowa w tworzeniu stron internetowych, które wyglądają i działają dobrze na różnych urządzeniach i rozmiarach ekranu. Za pomocą media queries można elastycznie dostosować wygląd strony do różnych warunków, zapewniając doskonałą jakość prezentacji i wygodę użytkowania na różnych platformach. Żeby jednak media queries działały na telefonach, strona potrzebuje jednego znacznika w sekcji head, o którym opowiem w następnej lekcji.
W edytorze poniżej znajdziesz media queries w praktyce, responsywny Flexbox i Grid, jednostki, obrazy i pokaz breakpointów. Zmieniaj szerokość podglądu i obserwuj, które reguły się włączają.
Kod do tej lekcji: index.html
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>Responsywność w CSS</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <div class="container">
11 <header class="header">
12 <h1>Responsywność w CSS</h1>
13 <p>Zmień rozmiar okna przeglądarki aby zobaczyć efekty</p>
14 </header>
15
16 <nav class="navigation">
17 <ul>
18 <li><a href="#media">Media Queries</a></li>
19 <li><a href="#flexbox">Flexbox</a></li>
20 <li><a href="#grid">CSS Grid</a></li>
21 <li><a href="#units">Jednostki</a></li>
22 <li><a href="#images">Obrazy</a></li>
23 </ul>
24 <div class="hamburger">
25 <span></span>
26 <span></span>
27 <span></span>
28 </div>
29 </nav>
30
31 <main class="main-content">
32 <section id="media" class="section">
33 <h2>Media Queries w praktyce</h2>
34 <div class="media-demo">
35 <div class="responsive-box">
36 <p>Ta sekcja zmienia kolor w zależności od rozmiaru ekranu:</p>
37 <ul>
38 <li>Mobilne (< 768px): Różowy</li>
39 <li>Tablet (768px - 1024px): Niebieski</li>
40 <li>Desktop (> 1024px): Zielony</li>
41 </ul>
42 </div>
43 </div>
44 </section>
45
46 <section id="flexbox" class="section">
47 <h2>Responsywny Flexbox</h2>
48 <div class="flex-responsive">
49 <div class="flex-item">Element 1</div>
50 <div class="flex-item">Element 2</div>
51 <div class="flex-item">Element 3</div>
52 <div class="flex-item">Element 4</div>
53 </div>
54 <p class="help-text">Na mobile: kolumna, na desktop: rząd</p>
55 </section>
56
57 <section id="grid" class="section">
58 <h2>Responsywny CSS Grid</h2>
59 <div class="grid-responsive">
60 <div class="grid-item">1</div>
61 <div class="grid-item">2</div>
62 <div class="grid-item">3</div>
63 <div class="grid-item">4</div>
64 <div class="grid-item">5</div>
65 <div class="grid-item">6</div>
66 </div>
67 <p class="help-text">Automatyczne dostosowanie kolumn do szerokości</p>
68 </section>
69
70 <section id="units" class="section">
71 <h2>Responsywne jednostki</h2>
72 <div class="units-demo">
73 <div class="unit-box vw-box">
74 <h3>VW Units</h3>
75 <p>Szerokość: 50vw (50% szerokości okna)</p>
76 </div>
77 <div class="unit-box vh-box">
78 <h3>VH Units</h3>
79 <p>Wysokość: 30vh (30% wysokości okna)</p>
80 </div>
81 <div class="unit-box rem-box">
82 <h3>REM Units</h3>
83 <p>Rozmiar bazujący na root font-size</p>
84 </div>
85 <div class="unit-box em-box">
86 <h3>EM Units</h3>
87 <p>Rozmiar relatywny do rodzica</p>
88 </div>
89 </div>
90 </section>
91
92 <section id="images" class="section">
93 <h2>Responsywne obrazy i media</h2>
94 <div class="image-demo">
95 <div class="image-container">
96 <img src="https://picsum.photos/800/400?random=1" alt="Responsywny obraz">
97 <p>Obraz automatycznie skaluje się</p>
98 </div>
99 <div class="video-container">
100 <div class="video-placeholder">
101 <p>Responsywne video</p>
102 <p>16:9 aspect ratio</p>
103 </div>
104 </div>
105 </div>
106 </section>
107
108 <section class="section">
109 <h2>Breakpoints demonstracja</h2>
110 <div class="breakpoint-demo">
111 <div class="breakpoint-indicator mobile">Mobile</div>
112 <div class="breakpoint-indicator tablet">Tablet</div>
113 <div class="breakpoint-indicator desktop">Desktop</div>
114 <div class="breakpoint-indicator large">Large Desktop</div>
115 </div>
116 <p class="help-text">Aktywny breakpoint jest podświetlony</p>
117 </section>
118 </main>
119
120 <aside class="sidebar">
121 <h3>Sidebar</h3>
122 <div class="sidebar-content">
123 <div class="widget">
124 <h4>Responsive Tips</h4>
125 <ul>
126 <li>Mobile-first approach</li>
127 <li>Flexible units (%, em, rem)</li>
128 <li>Viewport meta tag</li>
129 <li>Flexible images</li>
130 </ul>
131 </div>
132 <div class="widget">
133 <h4>Common Breakpoints</h4>
134 <ul>
135 <li>Mobile: < 768px</li>
136 <li>Tablet: 768px - 1024px</li>
137 <li>Desktop: > 1024px</li>
138 <li>Large: > 1440px</li>
139 </ul>
140 </div>
141 </div>
142 </aside>
143
144 <footer class="footer">
145 <p>© 2024 Responsywna strona - CSS Demo</p>
146 </footer>
147 </div>
148</body>
149</html>Pamiętaj: strona responsywna to świątynia, którą architekt dopasowuje do placu budowy, a media queries to jego pytanie o to, ile tym razem jest miejsca.
Widzisz błąd w tej lekcji?
Sprawdź się
Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.
1. Co oznacza responsywność w kontekście stron internetowych?
2. Jak zacząć definicję media query w CSS?
To 2 z 3 pytań do tej lekcji. Pozostałe rozwiążesz w grze.
Zadania praktyczne w grze
- Edytor kodu
Stwórz responsywny kontener dla tabletu używając media query. HTML: <div class='container'>Świątynia na tablecie</div>. CSS bazowy: .container {width: 100%; background: #F4E4C1; padding: 20px;}. Następnie dodaj @media (min-width: 768px) and (max-width: 1024px) { .container {width: 90%; margin: 0 auto; background: #FFD700; font-size: 20px; border: 3px solid #8B4513;} }. Testuj zmieniając szerokość okna - obserwuj jak styl się zmienia na tablecie!
- Klikanie w kolejności
Ułóż składnię media query:
- Klikanie w kolejności
Wymień standardowe breakpointy: