7.1 Основні принципи
Відгукливі шрифти відіграють важливу роль у створенні адаптивного веб-дизайну. Використання відносних одиниць, таких як vw, vh, vmin, і vmax, дозволяє шрифтам динамічно змінюватися залежно від розмірів viewport, забезпечуючи оптимальне відображення тексту на різних пристроях. Розглянемо детальніше, як ці одиниці працюють і як їх використовувати для створення відгукливих шрифтів.
Основні концепції
vw і vh:
vw(viewport width): 1 одиницяvwдорівнює 1% від ширини viewportvh(viewport height): 1 одиницяvhдорівнює 1% від висоти viewport
vmin і vmax:
vmin(viewport minimum): 1 одиницяvminдорівнює 1% від меншого виміру viewport (або ширина, або висота)vmax(viewport maximum): 1 одиницяvmaxдорівнює 1% від більшого виміру viewport (або ширина, або висота)
Переваги відгукливих шрифтів:
- Покращення читабельності: розмір шрифту автоматично підлаштовується під розміри екрану, забезпечуючи комфортне читання на будь-яких пристроях
- Гнучкість дизайну: відгукливі шрифти допомагають підтримувати гармонійний і збалансований дизайн при зміні розмірів viewport
- Єдиний підхід: використання відносних одиниць для шрифтів дозволяє підтримувати єдиний підхід до створення адаптивного дизайну
7.2 Приклади використання vw і vh
Приклад 1: Основний розмір шрифту з використанням vw
Створимо приклад, у якому розмір шрифту змінюється залежно від ширини viewport:
body {
font-size: 2vw; /* Розмір шрифту дорівнює 2% від ширини viewport */
}
h1 {
font-size: 4vw; /* Розмір шрифту заголовка дорівнює 4% від ширини viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Відгукливий шрифт з використанням vw</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Відгукливий заголовок</h1>
<p>Цей текст змінює розмір залежно від ширини viewport.</p>
</body>
</html>
Пояснення коду:
body { font-size: 2vw; }: встановлює розмір шрифту для тексту всерединіbody, дорівнює 2% від ширини viewporth1 { font-size: 4vw; }: встановлює розмір шрифту для заголовкаh1, дорівнює 4% від ширини viewport
Приклад 2: Основний розмір шрифту з використанням vh
Тепер створимо приклад, у якому розмір шрифту змінюється залежно від висоти viewport:
body {
font-size: 2vh; /* Розмір шрифту дорівнює 2% від висоти viewport */
}
h1 {
font-size: 4vh; /* Розмір шрифту заголовка дорівнює 4% від висоти viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Відгукливий шрифт з використанням vh</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Відгукливий заголовок</h1>
<p>Цей текст змінює розмір залежно від висоти viewport.</p>
</body>
</html>
Пояснення коду:
body { font-size: 2vh; }: встановлює розмір шрифту для тексту всерединіbody, дорівнює 2% від висоти viewporth1 { font-size: 4vh; }: встановлює розмір шрифту для заголовкаh1, дорівнює 4% від висоти viewport
7.3 Приклади використання vmin і vmax
Приклад 1: Основний розмір шрифту з використанням vmin
Створимо приклад, у якому розмір шрифту змінюється залежно від меншого виміру viewport:
body {
font-size: 2vmin; /* Розмір шрифту дорівнює 2% від меншого виміру viewport */
}
h1 {
font-size: 4vmin; /* Розмір шрифту заголовка дорівнює 4% від меншого виміру viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Відгукливий шрифт з використанням vmin</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Відгукливий заголовок</h1>
<p>Цей текст змінює розмір залежно від меншого виміру viewport.</p>
</body>
</html>
Пояснення коду:
body { font-size: 2vmin; }: встановлює розмір шрифту для тексту всерединіbody, дорівнює 2% від меншого виміру viewporth1 { font-size: 4vmin; }: встановлює розмір шрифту для заголовкаh1, дорівнює 4% від меншого виміру viewport
Приклад 2: Основний розмір шрифту з використанням vmax
Створимо приклад, у якому розмір шрифту змінюється залежно від більшого виміру viewport:
body {
font-size: 2vmax; /* Розмір шрифту дорівнює 2% від більшого виміру viewport */
}
h1 {
font-size: 4vmax; /* Розмір шрифту заголовка дорівнює 4% від більшого виміру viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Відгукливий шрифт з використанням vmax</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Відгукливий заголовок</h1>
<p>Цей текст змінює розмір залежно від більшого виміру viewport.</p>
</body>
</html>
Пояснення коду:
body { font-size: 2vmax; }: встановлює розмір шрифту для тексту всерединіbody, дорівнює 2% від більшого виміру viewporth1 { font-size: 4vmax; }: встановлює розмір шрифту для заголовкаh1, дорівнює 4% від більшого виміру viewport
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ