calcal.ru
🚀 Frontend Developer Tools

Генератор Fluid Clamp()

Создавайте идеально плавную адаптивность для шрифтов, отступов и сеток. Забудьте о скачках на брейкпоинтах — математика сделает всё за вас.

min-widthmax-widthslope
Загрузка инструмента...

Эволюция адаптивности

Почему современные фронтенд-разработчики переходят от медиа-запросов к математическим функциям.

Старый подход: Скачки

Использование множества @media (min-width) создает ступенчатый график. Дизайн "ломается" или выглядит непропорционально на промежуточных разрешениях (например, на новых планшетах).

Новый подход: Fluid

y = mx + b

Функция clamp() использует линейную интерполяцию. Значение плавно меняется между минимумом и максимумом, идеально заполняя пространство любого экрана.

Анатомия CSS clamp()

Функция clamp принимает три аргумента. Представьте это как тиски, которые сжимают значение, не давая ему выйти за пределы, но позволяя быть гибким посередине.

  • 01

    Minimum (MIN)

    Жесткая нижняя граница. Значение никогда не станет меньше этого (например, 16px на мобильном).

  • 02

    Preferred (VAL)

    Динамическая формула (обычно vw + rem). Именно она отвечает за плавное изменение при ресайзе.

  • 03

    Maximum (MAX)

    Жесткая верхняя граница. Значение перестанет расти на больших экранах, чтобы не стать гигантским.

// CSS Syntax
font-size: clamp(
1rem// MIN: 16px
2.5vw + 0.5rem// PREFERRED
2rem// MAX: 32px
);
CSS3 Standard

Где это использовать?

Aa

Fluid Typography

Идеально для заголовков (H1-H3). Шрифт автоматически подстраивается под ширину устройства, оставаясь читаемым на телефоне и впечатляющим на 4K мониторе.

↔️

Отступы (Gaps)

Задавайте gap в grid-сетках или margin/padding для секций. На мобильном отступы будут компактными (16px), а на десктопе — воздушными (80px).

📦

Высота блоков

Используйте для min-height герой-секций или карточек. Это позволяет избежать жесткой фиксации высоты, которая часто ломает верстку при переполнении контентом.

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

Да, функция clamp() поддерживается во всех современных браузерах (Chrome 79+, Firefox 75+, Safari 13.1+). Глобальная поддержка превышает 96%. Для поддержки очень старых браузеров (как IE11) рекомендуется указывать фиксированное значение перед clamp как fallback.
clamp(MIN, VAL, MAX) — это комбинация min() и max(). Она эквивалентна записи max(MIN, min(VAL, MAX)). Clamp удобнее, так как позволяет записать диапазон и идеальное значение в одну строчку.
При использовании fluid typography важно следить, чтобы текст не становился слишком мелким. Не устанавливайте нижнюю границу (MIN) меньше 12px-14px. Также убедитесь, что текст масштабируется при зуме браузера (использование rem единиц в формуле помогает этому).
Slope определяет скорость изменения значения. Чем больше число vw (например, 5vw против 2vw), тем агрессивнее элемент будет расти при увеличении ширины экрана.
Да, это отличная практика. Уменьшение line-height на маленьких экранах и увеличение на больших улучшает читабельность длинных строк текста.

Похожие инструменты

🧮

Калькулятор бодибилдинга: FFMI, макросы, объём тренировки

Расчёт FFMI, калорий и макронутриентов, объёма тренировок, идеальных пропорций и подготовки к соревнованиям ФБФР.

🏗️

Калькулятор теплоизоляции (R-значение, U-значение)

Расчет толщины утеплителя и конвертер R-value ↔ U-value. Таблица теплопроводности материалов (минвата, пенопласт и др).

🏭

Калькулятор грузоперевозок и доставки

Расчёт стоимости доставки по России: Почта, СДЭК, Деловые Линии. Объёмный вес, сроки, таможня.

🏠

Калькулятор фотографа: экспозиция, ГРИП, печать, объектив

Калькулятор для фотографов. Расчёт экспозиции, глубины резкости, размера печати, параметров объектива и бюджета оборудования.

🏗️

Калькулятор блок-хауса

Расчёт блок-хауса на фасад дома: панели, крепёж, обрешётка, стоимость

🧮

Калькулятор точки безубыточности

Расчёт BEP в штуках и рублях. Постоянные/переменные затраты, маржинальный доход, запас прочности.

🏠

Калькулятор школьных принадлежностей

Список и бюджет школьных принадлежностей к 1 сентября. По классам и предметам.

💻

Калькулятор NAS / сетевого хранилища

Подбор NAS: объём дисков, RAID, стоимость системы. Synology, QNAP, выбор дисков.

🧮

Калькулятор бадминтона: калории, смэш, натяжка, площадка

Калькулятор для бадминтона. Расход калорий, скорость смэша, натяжка ракетки, физические тесты и размеры площадки.

🏥

Калькулятор соотношения талии к бедрам (WHR)

Рассчитайте индекс талия/бедра (WHR) для оценки типа фигуры и рисков метаболического синдрома.

⚙️

Калькулятор фильтров НЧ и ВЧ (RC/LC)

Фильтры нижних и верхних частот. Построение АЧХ, подбор компонентов RC и LC цепей. Формулы.

💰

Калькулятор риска портфеля (Sharpe, VaR, Beta)

Рассчитайте риск инвестиционного портфеля: коэффициент Шарпа, VaR, бета, стандартное отклонение. Оценка диверсификации.

🏥

Калькулятор телемедицины: пропускная способность, ROI и нагрузка центра

Телемедицинские расчёты онлайн: пропускная способность канала, ROI телемедицины, нагрузка центра, качество консультации, стоимость.

🏠

Калькулятор барбекю / гриля

Расчёт мяса, овощей, углей и напитков на компанию. Маринад, бюджет, шампуры. Свинина, курица, говядина, баранина.

💻

Калькулятор SLA / стоимости простоя

Расчёт допустимого простоя по SLA (99.9% → минуты в год). Калькулятор стоимости даунтайма и обратный расчёт SLA по фактическому простою.

Лиана Арифметова
Создатель

Лиана Арифметова

Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».

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

⚖️

Отказ от ответственности

Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.

Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.

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

Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.