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

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-змінних.