7.1 Główne zasady
Czcionki responsywne odgrywają ważną rolę w tworzeniu responsywnego designu stron internetowych. Zastosowanie jednostek względnych, takich jak
vw, vh, vmin, i vmax, pozwala czcionkom dynamicznie zmieniać się w zależności od rozmiarów
viewportu, zapewniając optymalne wyświetlanie tekstu na różnych urządzeniach. Przeanalizujmy bardziej szczegółowo, jak te jednostki działają
i jak je używać do tworzenia responsywnych czcionek.
Podstawowe koncepcje
vw i vh:
vw(viewport width): 1 jednostkavwto 1% szerokości viewportuvh(viewport height): 1 jednostkavhto 1% wysokości viewportu
vmin i vmax:
vmin(viewport minimum): 1 jednostkavminto 1% mniejszego wymiaru viewportu (albo szerokości, albo wysokości)vmax(viewport maximum): 1 jednostkavmaxto 1% większego wymiaru viewportu (albo szerokości, albo wysokości)
Zalety czcionek responsywnych:
- Poprawa czytelności: rozmiar czcionki automatycznie dostosowuje się do rozmiaru ekranu, zapewniając komfortowe czytanie na każdym urządzeniu
- Elastyczność designu: czcionki responsywne pomagają utrzymać harmonijny i zrównoważony design przy zmianach rozmiaru viewportu
- Jednolitość podejścia: użycie jednostek względnych dla czcionek pozwala utrzymać jednolite podejście do tworzenia responsywnego designu
7.2 Przykłady użycia vw i vh
Przykład 1: Podstawowy rozmiar czcionki z zastosowaniem vw
Stwórzmy przykład, w którym rozmiar czcionki zmienia się w zależności od szerokości viewportu:
body {
font-size: 2vw; /* Rozmiar czcionki równy 2% szerokości viewportu */
}
h1 {
font-size: 4vw; /* Rozmiar czcionki nagłówka równy 4% szerokości viewportu */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Czcionka responsywna z użyciem vw</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Responsywny nagłówek</h1>
<p>Ten tekst zmienia rozmiar w zależności od szerokości viewportu.</p>
</body>
</html>
Wyjaśnienie kodu:
body { font-size: 2vw; }: ustawia rozmiar czcionki dla tekstu wewnątrzbody, równy 2% szerokości viewportuh1 { font-size: 4vw; }: ustawia rozmiar czcionki dla nagłówkah1, równy 4% szerokości viewportu
Przykład 2: Podstawowy rozmiar czcionki z zastosowaniem vh
Teraz stwórzmy przykład, w którym rozmiar czcionki zmienia się w zależności od wysokości viewportu:
body {
font-size: 2vh; /* Rozmiar czcionki równy 2% wysokości viewportu */
}
h1 {
font-size: 4vh; /* Rozmiar czcionki nagłówka równy 4% wysokości viewportu */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Czcionka responsywna z użyciem vh</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Responsywny nagłówek</h1>
<p>Ten tekst zmienia rozmiar w zależności od wysokości viewportu.</p>
</body>
</html>
Wyjaśnienie kodu:
body { font-size: 2vh; }: ustawia rozmiar czcionki dla tekstu wewnątrzbody, równy 2% wysokości viewportuh1 { font-size: 4vh; }: ustawia rozmiar czcionki dla nagłówkah1, równy 4% wysokości viewportu
7.3 Przykłady użycia vmin i vmax
Przykład 1: Podstawowy rozmiar czcionki z zastosowaniem vmin
Stwórzmy przykład, w którym rozmiar czcionki zmienia się w zależności od mniejszego wymiaru viewportu:
body {
font-size: 2vmin; /* Rozmiar czcionki równy 2% mniejszego wymiaru viewportu */
}
h1 {
font-size: 4vmin; /* Rozmiar czcionki nagłówka równy 4% mniejszego wymiaru viewportu */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Czcionka responsywna z użyciem vmin</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Responsywny nagłówek</h1>
<p>Ten tekst zmienia rozmiar w zależności od mniejszego wymiaru viewportu.</p>
</body>
</html>
Wyjaśnienie kodu:
body { font-size: 2vmin; }: ustawia rozmiar czcionki dla tekstu wewnątrzbody, równy 2% mniejszego wymiaru viewportuh1 { font-size: 4vmin; }: ustawia rozmiar czcionki dla nagłówkah1, równy 4% mniejszego wymiaru viewportu
Przykład 2: Podstawowy rozmiar czcionki z zastosowaniem vmax
Stwórzmy przykład, w którym rozmiar czcionki zmienia się w zależności od większego wymiaru viewportu:
body {
font-size: 2vmax; /* Rozmiar czcionki równy 2% większego wymiaru viewportu */
}
h1 {
font-size: 4vmax; /* Rozmiar czcionki nagłówka równy 4% większego wymiaru viewportu */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Czcionka responsywna z użyciem vmax</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Responsywny nagłówek</h1>
<p>Ten tekst zmienia rozmiar w zależności od większego wymiaru viewportu.</p>
</body>
</html>
Wyjaśnienie kodu:
body { font-size: 2vmax; }: ustawia rozmiar czcionki dla tekstu wewnątrzbody, równy 2% większego wymiaru viewportuh1 { font-size: 4vmax; }: ustawia rozmiar czcionki dla nagłówkah1, równy 4% większego wymiaru viewportu
GO TO FULL VERSION