Responsywne jednostki vw, vh + relatywne

W poprzednich wizjach można było zobaczyć temat jednostek. Temat responsywności to dobre miejsce, żeby wyjaśnić sobie wszystkie rodzaje jednostek:

Jednostki bezwzględne - są to wartości, które nie są relatywnie uzależnione od wcześniej zdeklarowanych wartości dla innych elementów.

• cm - centimeters
• mm - millimeters
• px - pixels (1px = 1/96th of 1in)

Jednostki względne - określają wartość względem innej wartości. Względne jednostki skalują się lepiej dla urządzeń responsywnych.

em - relatywna do wartości font-size elementu (2em oznacza 2 razy rozmiar obecnego elementu) rem - relatywna do elementu głównego - najczęściej jest to element html vw - 1vh to 1% obecnej szerokości urządzenia vh - 1vh to 1% obecnej wysokości urządzenia % - relatywne do elementu rodzica

Jednostki Viewportu (vw, vh)

Jednostki vw (viewport width) i vh (viewport height) to jednostki, które są równoznaczne z procentem szerokości lub wysokości okna przeglądarki.

vw - Viewport Width

1vw odpowiada 1% szerokości okna przeglądarki.

1h1 {
2  font-size: 5vw; /* Rozmiar czcionki dostosowuje się do 5% szerokości okna przeglądarki */
3}

vh - Viewport Height

1vh odpowiada 1% wysokości okna przeglądarki.

1.section {
2  height: 50vh; /* Wysokość sekcji dostosowuje się do 50% wysokości okna przeglądarki */
3}

Relatywne Jednostki (em, rem)

Relatywne jednostki, takie jak em i rem, pozwalają na skalowanie elementów w stosunku do rozmiaru czcionki.

em

Jednostka em jest relatywna względem rozmiaru czcionki elementu nadrzędnego.

1p {
2  font-size: 16px;
3}
4
5p span {
6  font-size: 1.5em; /* 1.5 * 16px = 24px */
7}

rem

Jednostka rem jest relatywna względem rozmiaru czcionki elementu głównego (root), czyli zwykle elementu <html>.

1html {
2  font-size: 16px;
3}
4
5h1 {
6  font-size: 2rem; /* 2 * 16px = 32px */
7}

Praktyczne Zastosowania

• Skalowanie Tekstu: vw i rem są użyteczne do skalowania rozmiaru tekstu w zależności od rozmiaru okna przeglądarki lub rozmiaru bazowego.
• Stworzenie Responsywnych Layoutów: vh i vw mogą być wykorzystane do tworzenia layoutów, które idealnie dopasowują się do różnych rozmiarów ekranu.
• Modularny Design: Relatywne jednostki takie jak em i rem umożliwiają tworzenie bardziej modularnego i elastycznego kodu CSS, który łatwo się dostosowuje i utrzymuje.

Zadanie: Responsywny Layout za pomocą jednostek vw, vh, em, i rem

Twoim zadaniem jest stworzenie strony internetowej z responsywnym layoutem, wykorzystując jednostki vw, vh, em i rem. Strona powinna składać się z nagłówka, sekcji głównej z dwoma kolumnami oraz stopki.

Krok 1: Stwórz podstawową strukturę dokumentu HTML

Utwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML. Dodaj nagłówek, sekcję główną z dwoma kolumnami oraz stopkę.

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  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Responsywny Layout</title>
8</head>
9<body>
10  <header class="header">
11    <h1>Responsywny Nagłówek</h1>
12  </header>
13  <main class="main">
14    <section class="section">
15      <div class="column">
16        <h2>Kolumna 1</h2>
17        <p>To jest przykładowy paragraf tekstu w kolumnie 1.</p>
18      </div>
19      <div class="column">
20        <h2>Kolumna 2</h2>
21        <p>To jest przykładowy paragraf tekstu w kolumnie 2.</p>
22      </div>
23    </section>
24  </main>
25  <footer class="footer">
26    <p>&copy; 2023 Responsywny Layout. Wszelkie prawa zastrzeżone.</p>
27  </footer>
28</body>
29</html>

Krok 2: Stwórz plik CSS

Otwórz lub utwórz nowy plik CSS i zapisz go jako styles.css.

Krok 3: Stylizacja podstawowa

Dodaj podstawowe style dla elementów .header, .main, .section, .column i .footer. Użyj jednostek vw, vh, em i rem, aby stworzyć responsywny układ.

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  background-color: #f0f0f0;
6}
7
8.header {
9  background-color: #333;
10  color: #fff;
11  padding: 2vh 0;
12  text-align: center;
13}
14
15.main {
16  padding: 2vw;
17}
18
19.section {
20  display: flex;
21  justify-content: space-between;
22}
23
24.column {
25  width: 48%;
26  background-color: #fff;
27  padding: 2em;
28  border-radius: 1rem;
29  box-shadow: 0 0 10px rgba(0,0,0,0.1);
30}
31
32.column h2 {
33  font-size: 2rem;
34  margin-bottom: 1em;
35}
36
37.column p {
38  font-size: 1.2rem;
39}
40
41.footer {
42  background-color: #333;
43  color: #fff;
44  text-align: center;
45  padding: 1vh 0;
46}

Krok 4: Dodaj Media Queries dla Responsywności

Aby layout był jeszcze bardziej responsywny, dodaj media queries, aby dostosować układ na mniejszych ekranach.

1@media (max-width: 768px) {
2  .section {
3    flex-direction: column;
4  }
5
6  .column {
7    width: 100%;
8    margin-bottom: 2vh;
9  }
10
11  .column:last-child {
12    margin-bottom: 0;
13  }
14}
15
16@media (max-width: 480px) {
17  .header {
18    padding: 3vh 0;
19  }
20
21  .column {
22    padding: 1em;
23  }
24
25  .column h2 {
26    font-size: 1.5rem;
27  }
28
29  .column p {
30    font-size: 1rem;
31  }
32}

Zadanie dodatkowe

1. Dodaj więcej sekcji do strony i eksperymentuj z różnymi wartościami vw, vh, em, i rem, aby zobaczyć, jak zmienia się układ.
2. Przetestuj swoje umiejętności, dodając inne elementy, takie jak obrazki, przyciski, czy formularze i zobacz, jak różne jednostki wpływają na ich responsywność.
3. Dodaj różne style do swojej strony, np. zmieniając kolory, marginesy, czy inne właściwości elementów, aby lepiej zrozumieć, jak działają różne opcje CSS.
4. Dodaj animacje do elementów, aby dodać interaktywność i lepsze doświadczenie użytkownika.

Podsumowanie

Zrozumienie i stosowanie różnych jednostek w CSS jest kluczowe dla tworzenia responsywnych i elastycznych layoutów. Eksperymentuj z różnymi jednostkami i stylami, aby lepiej zrozumieć, jak działają i jak można je wykorzystać do tworzenia pięknych, responsywnych stron internetowych.