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

Адаптивный размер шрифта и отступов без медиазапросов.

Минимальный размер px На узком экране. Максимальный размер px На широком экране. Ширина экрана для минимума px Обычно ширина телефона. Ширина экрана для максимума px Начиная с неё размер не растёт. Единицы в результате Размер шрифта страницы px Нужен, чтобы перевести px в rem. Свойство CSS Например: font-size, padding, margin-inline, gap.

CSS

font-size: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);

Значение: clamp(1rem, 0.6479rem + 1.5023vw, 2rem)
При ширине 375 px: 16 px
При ширине 1440 px: 32 px
Растёт со скоростью: 1.5023vw, то есть 0.015 px на каждый px ширины

Как это устроено

Скорость роста = (максимум − минимум) / (макс. ширина − мин. ширина). Смещение = минимум − скорость × мин. ширина. Значение: clamp(мин, смещение + скорость × 100vw, макс).

Как пользоваться

Введите минимальный и максимальный размер в пикселях.

Укажите ширины экрана, между которыми размер растёт.

Скопируйте готовую строку CSS.

Пример расчёта

Размер от 16 до 32 px при ширине экрана от 375 до 1440 px: font-size: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);

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

Функция clamp(мин, предпочтительное, макс) плавно меняет размер между двумя значениями при изменении ширины экрана. Задайте минимум, максимум и ширины экрана, между которыми размер растёт, — калькулятор выдаст готовое значение для CSS. Подходит для шрифтов, отступов, зазоров и ширин.

Расчёт идёт в браузере.

Вопросы

Почему лучше rem, а не px?

Размер в rem учитывает настройку шрифта в браузере пользователя, а в px — нет. Это важно для доступности.

Поддерживают ли clamp() браузеры?

Да, clamp() работает во всех современных браузерах.

Возможно, вам пригодится

CSS и кодирование Конвертер единиц CSS и цветов px в em, rem, pt и миллиметры, цвет HEX в RGB, HSL и CMYK. Сжатие и проверка кода Минификатор CSS, JS и HTML Убирает комментарии и лишние пробелы из кода. Осторожно: ничего не переименовывает и не ломает логику. Сжатие и проверка кода Форматирование HTML и CSS Расставит отступы и переносы строк в сжатом коде. Проверка сайта Проверка адаптива в разрешениях Покажет сайт в шести разрешениях рядом.