📐

Калькулятор CSS clamp()

Генератор адаптивных CSS-значений для font-size, padding, margin и других свойств

Быстрые пресеты

Минимальный размер (px)Размер на узком экране

Максимальный размер (px)Размер на широком экране

Мин. ширина viewport (px)

Макс. ширина viewport (px)

Базовый font-size (px)Обычно 16px (html root)

Единица вывода

CSS-свойство

Загрузка инструмента...

Калькулятор CSS clamp() онлайн — генератор адаптивных значений для вёрстки

Бесплатный онлайн-калькулятор CSS clamp() для автоматической генерации адаптивных значений CSS-свойств. Функция clamp() в CSS позволяет задать минимальное, предпочтительное и максимальное значение для любого CSS-свойства, обеспечивая плавное масштабирование элементов в зависимости от ширины экрана пользователя. Наш генератор clamp CSS мгновенно рассчитывает формулу на основе указанных вами пиксельных значений и диапазона viewport, выдавая готовый к использованию CSS-код.

Инструмент предназначен для фронтенд-разработчиков, верстальщиков, UI/UX-дизайнеров и всех, кто работает с адаптивной вёрсткой. С его помощью можно рассчитать clamp для font-size, padding, margin, gap, width, height, line-height, letter-spacing, border-radius и других CSS-свойств, где требуется плавное изменение значения в зависимости от размера экрана.

Калькулятор clamp CSS автоматически вычисляет предпочтительное значение (preferred value) с использованием единиц vw и rem, исключая необходимость ручного расчёта по формуле. Вы указываете минимальный и максимальный размер в пикселях, а также диапазон viewport — инструмент генерирует готовое CSS-правило, которое можно сразу скопировать и вставить в ваш проект. Поддерживается вывод в rem (рекомендуется для доступности) и в px.

В отличие от медиа-запросов, CSS clamp обеспечивает плавное изменение значений без рывков и скачков. Текст, отступы и другие элементы масштабируются пропорционально ширине окна браузера, создавая по-настоящему fluid-дизайн. Это особенно важно для типографики: адаптивный размер шрифта (fluid typography) улучшает читаемость на любом устройстве — от мобильного телефона до широкоформатного монитора.

Встроенные пресеты позволяют быстро сгенерировать clamp для типичных сценариев: заголовки H1–H3, основной текст, отступы секций, контейнеры и герой-блоки. Визуальный предпросмотр с интерактивным ползунком viewport помогает наглядно увидеть, как будет вести себя значение на разных размерах экрана. Все расчёты выполняются мгновенно в браузере — ваши данные никуда не отправляются.

Калькулятор CSS clamp полезен широкому кругу специалистов в веб-разработке. Фронтенд-разработчики используют его для быстрого создания адаптивной типографики без ручных вычислений. Верстальщики применяют инструмент для расчёта адаптивных отступов, gap и размеров контейнеров. UI/UX-дизайнеры получают готовые CSS-значения для передачи в разработку. Начинающие веб-разработчики осваивают функцию clamp() на наглядных примерах с живым превью. Преподаватели и студенты курсов по CSS и адаптивной вёрстке используют калькулятор как учебное пособие.

Автоматический расчёт CSS clamp() по пиксельным значениям и диапазону viewport
Вывод результата в rem или px с готовым CSS-правилом для копирования
8 быстрых пресетов для заголовков, текста, отступов и контейнеров
Интерактивный предпросмотр с ползунком ширины viewport в реальном времени
Визуальная шкала масштабирования с зонами min, preferred и max
Поддержка 9 CSS-свойств: font-size, padding, margin, gap, width, height и других
Настройка базового размера шрифта (root font-size) для корректного перевода в rem
Копирование результата одним кликом — только clamp() или с CSS-комментариями
100% клиентская обработка — данные не покидают ваш браузер

CSS clamp() vs медиа-запросы: сравнение подходов к адаптивности

Критерий	CSS clamp()	@media запросы
Масштабирование	Плавное, без скачков	Ступенчатое, на брейкпоинтах
Объём CSS-кода	1 строка CSS	Несколько @media-правил
Поддержка браузерами	96%+ (все современные)	99%+ (все браузеры)
Удобство поддержки	Легко менять значения	Надо обновлять каждый @media
Типографика	Идеально для fluid typography	Только ступенчатые размеры
Ручной расчёт	Нужен калькулятор (этот!)	Простые фиксированные значения

Как работает формула CSS clamp() — математика за генератором

Укажите размеры в пикселях

Введите минимальный размер (например, 16px для мобильных устройств) и максимальный размер (например, 32px для десктопов). Если вы работаете с типографикой, минимальный размер — это font-size на самом узком экране, максимальный — на самом широком. Можно воспользоваться пресетами для типичных значений заголовков и текста.

Задайте диапазон viewport

Укажите минимальную и максимальную ширину viewport в пикселях. Стандартные значения: 320px (мобильный) и 1200px (десктоп). В диапазоне между этими значениями размер будет плавно масштабироваться. За пределами диапазона значение фиксируется на минимуме или максимуме.

Настройте параметры вывода (при необходимости)

В дополнительных настройках можно выбрать единицу вывода (rem или px), указать базовый font-size (по умолчанию 16px) и выбрать CSS-свойство для генерации правила. Рекомендуется использовать rem для лучшей доступности и совместимости с пользовательскими настройками браузера.

Скопируйте результат и проверьте превью

Результат генерируется автоматически. Используйте кнопки копирования, чтобы получить только clamp() или полное CSS-правило с комментариями. Двигайте ползунок в превью, чтобы увидеть, как значение ведёт себя на разных размерах экрана. Вставьте скопированный код в ваш CSS-файл.

Примеры использования CSS clamp() в реальных проектах

📝 Адаптивная типографика (fluid typography)

Самый частый сценарий — создание адаптивного размера шрифта. Заголовок H1 с минимумом 24px на мобильных и максимумом 48px на десктопе плавно масштабируется без медиа-запросов. Вместо каскада @media достаточно одной строки CSS с clamp(), и текст идеально читается на любом устройстве.

📐 Адаптивные отступы и spacing

Секции сайта часто требуют разных отступов на мобильных и десктопах. Вместо фиксированных padding с медиа-запросами используйте clamp() для плавного изменения отступов. Например, padding секции: от 16px на мобильном до 64px на широком мониторе, создавая пропорциональное пространство на всех экранах.

🎨 Адаптивный border-radius и декоративные элементы

Скругление углов карточек, кнопок и баннеров может масштабироваться вместе с дизайном. На мобильных устройствах достаточно небольшого радиуса 8px, а на десктопах карточки выглядят лучше с закруглением 24px. CSS clamp() обеспечивает плавный переход, сохраняя визуальную гармонию на любом экране.

📏 Адаптивная ширина контейнера и grid gap

Gap в CSS Grid и Flexbox-контейнерах тоже можно делать адаптивным. Расстояние между карточками каталога: от 12px на мобильном до 32px на десктопе. Это создает визуально сбалансированную сетку без перегрузки контента на маленьких экранах и с комфортными промежутками на больших.

Частые вопросы о CSS clamp() и калькуляторе

Что такое CSS clamp() и зачем он нужен?

CSS clamp() — это математическая функция в CSS, которая ограничивает значение между минимумом и максимумом, позволяя ему плавно масштабироваться в этом диапазоне. Синтаксис: clamp(MIN, PREFERRED, MAX). Браузер использует PREFERRED значение, но не позволяет ему стать меньше MIN или больше MAX. Это незаменимо для адаптивной типографики, отступов и любых CSS-свойств, которые должны пропорционально изменяться на разных экранах.

Какие браузеры поддерживают CSS clamp()?

Функция clamp() поддерживается более чем 96% браузеров по данным Can I Use. Это Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+ и Opera 66+. Не поддерживается в Internet Explorer, но этот браузер уже не получает обновлений. Для проектов, требующих поддержки старых браузеров, рекомендуется использовать clamp() с фолбэком через фиксированные значения.

Что лучше использовать в clamp() — rem или px?

Рекомендуется использовать rem. Единица rem (root em) привязана к базовому размеру шрифта документа (обычно 16px). Если пользователь увеличивает шрифт в настройках браузера, значения в rem масштабируются вместе с ним, что важно для доступности (accessibility). Пиксели (px) — фиксированные единицы, они игнорируют пользовательские настройки. Наш калькулятор по умолчанию выводит результат в rem.

Какие значения viewport указывать в калькуляторе?

Минимальный viewport — это ширина самого узкого экрана, который вы поддерживаете. Обычно это 320px (iPhone SE) или 375px (iPhone 12/13). Максимальный viewport — ширина, на которой размер фиксируется. Для большинства проектов подходит 1200px или 1440px. Для сайтов с контейнером максимальной ширины используйте ширину контейнера как максимальный viewport.

Можно ли использовать clamp() не только для font-size?

Да, clamp() работает с любым CSS-свойством, принимающим числовые значения с единицами измерения. Помимо font-size его активно применяют для padding, margin, gap, width, height, line-height, letter-spacing, border-radius, max-width и других свойств. Наш калькулятор позволяет выбрать нужное CSS-свойство и генерирует готовое правило.

Как добавить фолбэк для старых браузеров?

Добавьте фиксированное значение перед clamp(). Браузер, не поддерживающий clamp(), проигнорирует его и использует предыдущее правило. Например: font-size: 24px; font-size: clamp(1rem, 0.5rem + 2vw, 2rem). Старый браузер применит 24px, современный — clamp(). Также можно использовать @supports для условной стилизации.

Безопасно ли использовать этот калькулятор?

Абсолютно безопасно. Все вычисления выполняются локально в вашем браузере с помощью JavaScript. Данные не отправляются на сервер, не сохраняются и не передаются третьим лицам. Инструмент работает полностью на стороне клиента. Вы можете использовать калькулятор даже при отключённом интернете после загрузки страницы.

Полезная информация

Калькулятор CSS clamp() на ТулФокс регулярно обновляется с учетом изменений в спецификации CSS и обратной связи пользователей.

Все расчёты выполняются локально в вашем браузере. Данные никуда не отправляются. Результаты основаны на математической формуле линейной интерполяции и точно соответствуют спецификации CSS Values and Units Module Level 4. Генерируемый CSS-код совместим со всеми современными фреймворками: React, Vue, Angular, Svelte, а также препроцессорами Sass, Less и PostCSS.

Если у вас есть предложения по улучшению калькулятора или вопросы по использованию CSS clamp(), воспользуйтесь формой обратной связи. Мы постоянно работаем над расширением функциональности инструмента.