Сегодня хочу рассказать, а возможно, напомнить вам о небольшом, но мощном трюке в CSS: использование функции clamp() для создания адаптивных шрифтов
Как работает функция clamp()?
Функция clamp() позволяет задавать размер шрифта, который будет динамически изменяться в зависимости от ширины экрана, но в пределах заранее установленных минимальных и максимальных значений. Это даёт возможность сделать шрифты адаптивными, сохра
Пример использования:
h1 {
font-size: clamp(16px, 5vw, 34px);
}
Как это работает на практике?
- Минимальный размер шрифта: 16px — значение, меньше которого шрифт не уменьшится.
- Максимальный размер шрифта: 34px — значение, больше которого шрифт не увеличится.
- Предпочитаемое адаптивное значение: 5vw — шрифт будет занимать 5% ширины видимой области экрана.
Пример 1: Узкая область экрана
Если ширина видимой области экрана составляет 300px, 5vw будет равно 15px. Однако, поскольку мы установили минимальный размер шрифта в 16px, реальный размер шрифта для данного экрана будет 16px.
Пример 2: Широкая область экрана
Если ширина экрана составляет 1400px, 5vw соответствует 70px. Но так как максимальный размер шрифта ограничен 34px, шрифт не будет превышать этого значения, даже при большом экране.
Дополнительные возможности clamp()
Функция clamp() может быть использована не только для шрифтов. Она также работает с padding, margin, и другими CSS-свойствами, где применимы такие единицы измерения, как длина, процент, частота, угол, время, числа и целые значения.
Это делает clamp() универсальным инструментом, который позволяет задавать адаптивные значения с чёткими границами, что особенно полезно в условиях современного веб-дизайна.
Поддержка браузерами
Для тех, кто интересуется совместимостью, стоит проверить поддержку функции clamp() в различных браузерах. В большинстве современных браузеров она уже поддерживается, что делает её безопасным выбором для использования в новых проектах.
Заключение
Функция clamp() — это мощный инструмент, позволяющий создавать адаптивные шрифты и другие элементы с предсказуемыми размерами. Благодаря ей вы можете обеспечивать комфортное чтение и использование интерфейса на любых устройствах, не теряя контроля над визуальными элементами. Если вы ещё не использовали clamp(), самое время попробовать и оценить её возможности на практике.
