.hero-title { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.1; }Текст не становится меньше 2rem и больше 4rem, а между ними реагирует на viewport.
УРОК 74 ИЗ 100
Создайте плавный заголовок с clamp()
Позвольте заголовку расти вместе с viewport в безопасных пределах.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
clamp(минимум, предпочтительное, максимум) ограничивает плавное значение. Браузер использует предпочтительное значение, пока оно находится между минимумом и максимумом.
.hero-title { font-size: 5vw; }Значение только в vw не имеет ограничений и может стать слишком маленьким или большим.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Задайте font-size: clamp(2rem, 5vw, 4rem) и line-height: 1.1.
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○Заголовок использует clamp() с нужными пределами.
- ○Высота строки равна 1.1.
- ○Целевой элемент присутствует на странице.
Объясните логику решения
Три аргумента задают нижний предел, плавное значение и верхний предел, а line-height сохраняет строки компактными.