7.1 Основные принципы
Отзывчивые шрифты играют важную роль в создании адаптивного веб-дизайна. Использование относительных единиц, таких как vw, vh, vmin, и vmax, позволяет шрифтам динамически изменяться в зависимости от размеров вьюпорта, обеспечивая оптимальное отображение текста на различных устройствах. Рассмотрим подробнее, как эти единицы работают и как их использовать для создания отзывчивых шрифтов.
Основные концепции
vw и vh:
vw(viewport width): 1 единицаvwравна 1% от ширины вьюпортаvh(viewport height): 1 единицаvhравна 1% от высоты вьюпорта
vmin и vmax:
vmin(viewport minimum): 1 единицаvminравна 1% от меньшего измерения вьюпорта (либо ширины, либо высоты)vmax(viewport maximum): 1 единицаvmaxравна 1% от большего измерения вьюпорта (либо ширины, либо высоты)
Преимущества отзывчивых шрифтов:
- Улучшение читабельности: размер шрифта автоматически подстраивается под размеры экрана, обеспечивая комфортное чтение на любых устройствах
- Гибкость дизайна: отзывчивые шрифты помогают поддерживать гармоничный и сбалансированный дизайн при изменении размеров вьюпорта
- Единый подход: использование относительных единиц для шрифтов позволяет поддерживать единый подход к созданию адаптивного дизайна
7.2 Примеры использования vw и vh
Пример 1: Основной размер шрифта с использованием vw
Создадим пример, в котором размер шрифта изменяется в зависимости от ширины вьюпорта:
body {
font-size: 2vw; /* Размер шрифта равен 2% от ширины вьюпорта */
}
h1 {
font-size: 4vw; /* Размер шрифта заголовка равен 4% от ширины вьюпорта */
}
<!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>Этот текст изменяет размер в зависимости от ширины вьюпорта.</p>
</body>
</html>
Объяснение кода:
body { font-size: 2vw; }: устанавливает размер шрифта для текста внутриbody, равный 2% от ширины вьюпортаh1 { font-size: 4vw; }: устанавливает размер шрифта для заголовкаh1, равный 4% от ширины вьюпорта
Пример 2: Основной размер шрифта с использованием vh
Теперь создадим пример, в котором размер шрифта изменяется в зависимости от высоты вьюпорта:
body {
font-size: 2vh; /* Размер шрифта равен 2% от высоты вьюпорта */
}
h1 {
font-size: 4vh; /* Размер шрифта заголовка равен 4% от высоты вьюпорта */
}
<!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>Этот текст изменяет размер в зависимости от высоты вьюпорта.</p>
</body>
</html>
Объяснение кода:
body { font-size: 2vh; }: устанавливает размер шрифта для текста внутриbody, равный 2% от высоты вьюпортаh1 { font-size: 4vh; }: устанавливает размер шрифта для заголовкаh1, равный 4% от высоты вьюпорта
7.3 Примеры использования vmin и vmax
Пример 1: Основной размер шрифта с использованием vmin
Создадим пример, в котором размер шрифта изменяется в зависимости от меньшего измерения вьюпорта:
body {
font-size: 2vmin; /* Размер шрифта равен 2% от меньшего измерения вьюпорта */
}
h1 {
font-size: 4vmin; /* Размер шрифта заголовка равен 4% от меньшего измерения вьюпорта */
}
<!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>Этот текст изменяет размер в зависимости от меньшего измерения вьюпорта.</p>
</body>
</html>
Объяснение кода:
body { font-size: 2vmin; }: устанавливает размер шрифта для текста внутриbody, равный 2% от меньшего измерения вьюпортаh1 { font-size: 4vmin; }: устанавливает размер шрифта для заголовкаh1, равный 4% от меньшего измерения вьюпорта
Пример 2: Основной размер шрифта с использованием vmax
Создадим пример, в котором размер шрифта изменяется в зависимости от большего измерения вьюпорта:
body {
font-size: 2vmax; /* Размер шрифта равен 2% от большего измерения вьюпорта */
}
h1 {
font-size: 4vmax; /* Размер шрифта заголовка равен 4% от большего измерения вьюпорта */
}
<!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>Этот текст изменяет размер в зависимости от большего измерения вьюпорта.</p>
</body>
</html>
Объяснение кода:
body { font-size: 2vmax; }: устанавливает размер шрифта для текста внутриbody, равный 2% от большего измерения вьюпортаh1 { font-size: 4vmax; }: устанавливает размер шрифта для заголовкаh1, равный 4% от большего измерения вьюпорта
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ