⭐ 0
🔍
Текст Зображення PDF та Документи Аудіо Музика Електросхемотехніка Час Корисні утиліти Валідатори Езотерика Ігри

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

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

🔒 Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.

Обробка... 0%

Результат

CSS clamp(MIN, PREFERRED, MAX) дає змогу одній декларації замінити цілий набір медіа-запитів: значення залишається на MIN нижче найменшої ширини вікна, на MAX — вище найбільшої, і плавно масштабується між ними. Найскладніше — це член PREFERRED, вираз відносно ширини вікна, як-от 0.833rem + 0.833vw, який ніхто не хоче виводити вручну. Цей калькулятор обчислює його по-справжньому за чотирма числами: мінімальний розмір, максимальний розмір і ширина вікна, за якої застосовується кожен із них.

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

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

Перемкніться в режим шкали типорозмірів для повної системи плавної типографіки за один крок: введіть базовий розмір і модульний коефіцієнт (від 1,125 до 1,5) і отримайте шість розмірів — small, base, h4, h3, h2 і h1 — кожен обчислений як власний рядок clamp() між м’якшою мобільною прогресією та повним десктопним коефіцієнтом, готовий до копіювання як блок CSS-змінних.

Подобається цей інструмент? Думаєте, цей продукт корисний? Бачите в ньому потенціал і хочете підтримати?

🛡️
Виконується в браузері

Ваші файли та дані ніколи не залишають цей пристрій. Обробка відбувається повністю офлайн. 100% безпечно.

Прийняті формати та правила

  • Справжня математика плавної типографіки: явно показано кутовий коефіцієнт, коефіцієнт vw та перетин з віссю Y, а не лише кінцевий рядок clamp().
  • Живий попередній перегляд: перетягніть повзунок ширини вікна перегляду, щоб побачити, як зразок тексту змінює розмір так само, як під час зміни розміру справжнього вікна браузера.
  • Режим шкали типорозмірів: базовий розмір і коефіцієнт від 1,125 до 1,5 генерують шість плавних кроків clamp() — small, base, h4, h3, h2, h1 — як готовий до копіювання CSS.

Ключові переваги

✓ Рядок clamp(), кутовий коефіцієнт, точка перетину та живий попередній перегляд оновлюються під час введення — натискати кнопку не потрібно.
✓ Повзунок ширини вікна перегляду керує блоком живого попереднього перегляду, тож ви бачите точне плавне масштабування між мінімальною та максимальною контрольними точками, а не лише формулу.
✓ Окремий режим шкали типорозмірів перетворює один базовий розмір і коефіцієнт на повну 6-крокову плавну шкалу заголовків, готову як блок CSS-змінних.

Варіанти використання

  • • Перетворіть мінімальний/максимальний розмір шрифту та діапазон в’юпорту на справжній рядок clamp() — з коефіцієнтом нахилу, vw-коефіцієнтом і точкою перетину, щоб не підбирати значення на око з туторіалу.
  • • Перетягуйте повзунок ширини в’юпорту, щоб попередньо переглянути, як адаптивний заголовок або розмір тексту змінюватиметься під час зміни розміру вікна браузера, перш ніж застосовувати його в таблиці стилів.
  • • Згенеруйте повну адаптивну типографічну шкалу з 6 кроків (від small до h1) на основі одного базового розміру та коефіцієнта, скопійовану як готовий до вставки блок CSS-кастомних властивостей.
  • • Створіть адаптивний clamp() для відступів (margin, padding, gap) замість font-size — та сама формула нахилу та перетину застосовна до будь-якої CSS-властивості.