Ключевые факты
- Категория
- Дизайн и цвет
- Типы входных данных
- number, text
- Тип результата
- json
- Покрытие примерами
- 4
- API доступен
- Yes
Обзор
Этот онлайн-калькулятор позволяет мгновенно рассчитать CSS-функцию clamp() для создания адаптивной типографики. На основе заданных размеров шрифта и ширины экрана (viewport) инструмент вычисляет оптимальный наклон в vw и смещение в rem, генерируя готовый код для плавного масштабирования текста без использования медиа-запросов.
Когда использовать
- •При верстке адаптивных сайтов, когда нужно плавно масштабировать заголовки и текст между мобильной и десктопной версиями.
- •При создании дизайн-систем с гибкой типографикой, чтобы избежать написания множества медиа-запросов @media.
- •Для точного расчета математических параметров функции clamp() на основе пиксельных макетов из Figma.
Как это работает
- •Укажите минимальную и максимальную ширину экрана (viewport) в пикселях.
- •Задайте желаемые минимальный и максимальный размеры шрифта, а также базовый размер шрифта (root font size) для перевода в rem.
- •Калькулятор автоматически рассчитает наклон (slope) и смещение (intercept) и сгенерирует готовое выражение clamp().
Сценарии использования
Плавное масштабирование крупных заголовков (h1, h2) на посадочных страницах.
Настройка адаптивного основного текста для блогов и новостных порталов.
Оптимизация отступов и размеров элементов в адаптивных карточках товаров.
Примеры
1. Адаптивный заголовок для лендинга
Фронтенд-разработчик- Контекст
- Разработчик верстает главный экран лендинга. Заголовок должен быть 24px на мобильных экранах (360px) и плавно увеличиваться до 48px на мониторах (1920px).
- Проблема
- Необходимо вручную рассчитать формулу для clamp(), чтобы избежать резких скачков размера шрифта.
- Как использовать
- Ввести minViewportPx = 360, maxViewportPx = 1920, minFontPx = 24, maxFontPx = 48, rootFontPx = 16.
- Пример конфигурации
-
minViewportPx: 360, maxViewportPx: 1920, minFontPx: 24, maxFontPx: 48, rootFontPx: 16 - Результат
- Получено выражение clamp(1.5rem, 1.1538rem + 1.5385vw, 3rem), готовое для вставки в CSS-файл.
2. Адаптивный текст для мобильного приложения
UI/UX дизайнер- Контекст
- Дизайнер готовит спецификацию для верстки текстового блока, который должен масштабироваться от 14px (на экранах 320px) до 18px (на экранах 1200px).
- Проблема
- Требуется быстро получить точную CSS-строку для разработчиков без ручных вычислений.
- Как использовать
- Ввести minViewportPx = 320, maxViewportPx = 1200, minFontPx = 14, maxFontPx = 18, rootFontPx = 16.
- Пример конфигурации
-
minViewportPx: 320, maxViewportPx: 1200, minFontPx: 14, maxFontPx: 18, rootFontPx: 16 - Результат
- Сгенерировано выражение clamp(0.875rem, 0.7955rem + 0.4545vw, 1.125rem) для плавной адаптации текста.
Проверить на примерах
textПримеры CSS-фреймворка Bulma
Примеры CSS-фреймворка Bulma, включая столбцы, компоненты, элементы управления формами, систему сетки и современные шаблоны дизайна на основе CSS
title token css
Примеры CSS Фреймворка Milligram
Примеры CSS фреймворка Milligram, включая типографику, формы, сетки и компоненты
title token css
Примеры CSS-селекторов
Коллекция примеров CSS-селекторов для тестирования извлечения и анализа
title token css
Примеры Tailwind CSS
Примеры Tailwind CSS - CSS-фреймворк с утилитарно-первым подходом, адаптивным дизайном, компонентами и пользовательской конфигурацией
title token css
Связанные хабы
Инструменты конвертации регистра, кодировки и нормализации текста
Сравните в одном хабе конвертацию регистра, ширины символов, кодировок, работу с quoted-printable и встроенную нормализацию текста.
Инструменты Text
Изучите 33 инструментов text для сценариев utility и быстро сравните близкие утилиты.
Инструменты анализа текста, читаемости и проверки содержания
Сравните в одном хабе текстовую статистику, определение языка, оценку читаемости, анализ тональности, модерацию и анализ шаблонов.
Инструменты маскирования, подсветки и форматирования текста
Сравните в одном хабе инструменты маскирования чувствительного текста, поиска PII, нормализации телефонов, подсветки фраз, центрирования текста и форматирования diff.
FAQ
Что делает этот калькулятор?
Он рассчитывает выражение clamp() для CSS, которое плавно изменяет размер шрифта в зависимости от ширины экрана.
Зачем указывать базовый размер шрифта (Root Font Size)?
Он необходим для корректного перевода пикселей (px) в относительные единицы (rem), что важно для доступности интерфейса.
Можно ли использовать полученный clamp() для других свойств, кроме font-size?
Да, сгенерированное выражение подходит для любых CSS-свойств, поддерживающих плавное изменение, например padding или margin.
Что происходит за пределами указанных границ viewport?
Функция clamp() ограничивает размер шрифта: он не станет меньше минимального значения на экранах меньше minViewport и не превысит максимум на экранах больше maxViewport.
Нужны ли медиа-запросы при использовании clamp()?
Нет, функция clamp() автоматически и плавно масштабирует текст в реальном времени без использования @media.