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

Рассчитайте значение CSS clamp() для плавного размера текста или отступов, которое линейно изменяется между минимальной и максимальной шириной вьюпорта.

Пример:

Как это работает

CSS-функция clamp(min, предпочтительное, max) позволяет задать плавный размер, который линейно изменяется в зависимости от ширины окна, оставаясь в пределах между минимумом и максимумом, — идеально для адаптивного текста без медиазапросов. Инструмент автоматически вычисляет наклон и точку пересечения в единицах vw и rem.

Зачем использовать clamp() вместо медиазапросов?

clamp() обеспечивает непрерывный и плавный переход между размерами, а не резкие скачки в фиксированных точках перелома, что даёт более естественный вид на всех промежуточных ширинах экрана.

Почему значения выражаются в rem, а не в px?

Использование rem позволяет размеру оставаться пропорциональным, если пользователь изменит размер шрифта по умолчанию в своём браузере, что улучшает доступность по сравнению с фиксированными значениями в пикселях.

Обработка 100% локально: расчёт полностью выполняется в вашем браузере через WebAssembly, без отправки каких-либо данных на сервер.