Генератор CSS clamp()

Что такое Генератор CSS clamp()?

Генератор CSS clamp() — это бесплатный калькулятор адаптивной типографики для фронтенд-разработчиков и дизайнеров. Вы задаёте минимальный размер шрифта, максимальный размер шрифта, минимальную ширину вьюпорта и максимальную ширину вьюпорта; он возвращает объявление clamp(min, preferred, max), где предпочтительное значение сочетает смещение в rem с наклоном в vw, так что текст растёт линейно вместе с экраном и никогда не выходит за ваши границы. Это избавляет от наслоения медиазапросов font-size и сохраняет адаптивность заголовков и основного текста на любом устройстве. Выберите размер предпросмотра, чтобы увидеть, как отображается значение, переключите единицу вывода между rem и px и скопируйте строку прямо в свою таблицу стилей.

Как пользоваться Генератор CSS clamp()

1. Введите минимальный размер шрифта — размер, который текст должен иметь на самом маленьком экране.
2. Введите максимальный размер шрифта — размер, которого текст должен достигать на самом большом экране.
3. Задайте минимальную и максимальную ширину вьюпорта, между которыми должен масштабироваться размер.
4. Откройте настройки, чтобы при желании сменить единицу вывода (rem остаётся доступным для людей с ограничениями; px тоже доступен).
5. Выберите размер предпросмотра, чтобы отрисовать пример текста при этом вьюпорте, и считайте значение clamp() в реальном времени.
6. Скопируйте сгенерированное выражение clamp() и вставьте его в свойство font-size в CSS.

Примеры

мин. шрифт 16, макс. шрифт 20, мин. vw 320, макс. vw 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

мин. шрифт 32, макс. шрифт 64, мин. vw 320, макс. vw 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

мин. шрифт 12, макс. шрифт 14, мин. vw 480, макс. vw 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

Часто задаваемые вопросы

Как значение clamp() масштабируется без медиазапросов?

clamp(min, preferred, max) принимает нижнюю границу, предпочтительное (плавное) значение и верхнюю границу. Предпочтительное значение — это прямая вида rem + vw, рассчитанная так, чтобы шрифт был равен вашему минимуму при минимальном вьюпорте и вашему максимуму при максимальном вьюпорте. Между этими значениями ширины браузер интерполирует автоматически, а за их пределами clamp() фиксирует размер на ближайшей границе — и всё это в одном объявлении.

Почему вывод в rem, а не в px?

Использование rem для фиксированных частей учитывает настройку размера шрифта в браузере пользователя, что лучше для доступности. Наклон, зависящий от вьюпорта, выражается в vw. Вы можете переключить единицу на px в настройках, если вашему проекту нужны абсолютные единицы, но rem — рекомендуемое значение по умолчанию.

Какой диапазон вьюпорта мне использовать?

Распространённый выбор — ваша наименьшая поддерживаемая ширина (часто 320px или 360px) для минимума и ваш самый широкий контейнер контента (например, 1240px–1536px) для максимума. Шрифт полностью плавный только внутри этого диапазона; ниже него текст остаётся на минимуме, а выше — на максимуме.

Работает ли это для любой длины в CSS, а не только для font-size?

Да. Сгенерированное значение clamp() — это просто длина, поэтому вы можете вставить его в padding, margin, gap или любое свойство, принимающее длину. Метки упоминают font-size, потому что адаптивная типографика — самое частое применение, но для отступов математика идентична.

Отправляются ли мои данные куда-либо?

Нет. Вычисление полностью выполняется в вашем браузере на JavaScript — ваши размеры шрифта и ширины вьюпорта никогда не загружаются ни на один сервер, поэтому инструмент работает конфиденциально и даже офлайн после загрузки страницы.