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

Вкажіть розміри для малих і великих екранів та отримайте адаптивне значення clamp() для плавного масштабування шрифтів, відступів чи інтервалів.

Розміри
Мінімум
Максимум
Значення clamp()
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Результат містить компонент rem у середньому терміні, тому текст масштабуватиметься при збільшенні масштабу сторінки до 200% (значення лише у viewport-одиницях цього б не дозволило).

Попередній перегляд

Адаптивний текст ідеального розміру.

Змінюйте розміри та ширину екрана, щоб налаштувати значення.

Усі обчислення виконуються повністю у вашому браузері. Введені дані не надсилаються на BroBroGo.

Поширені запитання

Як калькулятор будує значення clamp()?

Ви задаєте дві точки: розмір на малому екрані та розмір на великому екрані. Калькулятор будує пряму лінію між ними, щоб розмір плавно збільшувався в міру розширення екрана, а потім обгортає це у функцію clamp(), яка не дозволяє значенню вийти за межі вказаного мінімуму та максимуму. Між цими двома ширинами розмір масштабується адаптивно, а за їхніми межами фіксується на найближчій межі.

Чому результат розраховується в rem та vw замість пікселів?

Межі задаються в rem, а динамічна середня частина містить компонент rem, тому текст продовжує масштабуватися, коли користувач збільшує масштаб сторінки або змінює стандартний розмір шрифту в браузері (використання лише пікселів або vw може завадити цьому). Ви вводите розміри в пікселях для зручності, а інструмент конвертує їх у rem на основі базового розміру шрифту.

Чи можна використовувати це для відступів, а не лише для шрифтів?

Так. Це ж значення підходить для padding, margin, gap, width або height — будь-де, де використовуються одиниці довжини. Перемкніть режим попереднього перегляду на «Блок» (Box), щоб спостерігати за зміною відступів замість тексту. Якщо ваші мінімальний та максимальний розміри однакові, результат перетвориться на звичайне фіксоване значення, оскільки масштабувати нічого.

Чи всі браузери підтримують clamp()?

Так, усі сучасні браузери підтримують clamp() ще з 2020 року, тому ви можете використовувати отримане значення без додаткових фолбеків. За дуже великих максимальних розмірів або високої швидкості масштабування варто перевірити при масштабі 200%, чи збільшується текст для користувачів, яким це необхідно.

Генератор CSS Cubic BezierКеруйте двома маркерами для створення кривої плавности, порівнюйте рух точок наживо та копіюйте готове значення cubic-bezier().Генератор Box ShadowКеруйте параметрами box-shadow за допомогою повзунків, комбінуйте шари для глибини та миттєво копіюйте готовий код CSS.Генератор градієнтівСтворюйте лінійні, радіальні або конічні градієнти, додавайте колірні точки, налаштовуйте напрямок та копіюйте CSS в один клік.Генератор Border RadiusЗаокруглюйте кожен кут повзунками, створюйте органічні асиметричні форми в еліптичному режимі та миттєво копіюйте CSS.Генератор FlexboxНалаштовуйте flex-контейнер та його елементи за допомогою візуальних інструментів, дивіться на результат наживо та копіюйте CSS в один клік.Генератор CSS GridЗадавайте кількість стовпців та рядків, виділяйте мишкою області для розміщення елементів та копіюйте готовий CSS та HTML-код.Форматування та мініфікація CSSВирівнюйте заплутаний CSS для зручного читання або мініфікуйте його для публікації — з безпечним режимом, який ніколи не змінює порядок правил.Конвертер px у rem та emКонвертуйте значення між px, rem та em на основі ваших базових та контекстних розмірів шрифтів — змінюйте будь-яке поле, а інші оновлюватимуться на льоту.