Генератор clamp()
Плинний font-size з CSS clamp() — задайте межі ширини екрана й діапазон розміру шрифту та миттєво отримайте результат
Параметри
Згенерований CSS
SCSS-функція
Параметри в px, повертає clamp у rem + vw
Виклик із поточними значеннями
Як працює генератор clamp()
Генеруйте плинні значення CSS clamp() для адаптивної типографіки й відступів. Задайте межі ширини екрана й діапазон розмірів — і миттєво отримайте результат.
Плинна типографіка
Генеруйте значення font-size, що плавно масштабуються між мінімумом і максимумом зі зміною ширини екрана. Без брейкпоінтів і медіазапитів — лише одне значення CSS clamp().
Межі ширини екрана
Задайте діапазон ширини екрана, у якому відбувається масштабування. Нижче мінімуму шрифт лишається найменшим, вище максимуму — найбільшим, а між ними масштабується лінійно.
Точне налаштування
Вводьте точні значення в пікселях або rem для мінімального й максимального розміру шрифту. Інструмент обчислює бажане значення за лінійним рівнянням, що пов'язує ширину екрана з розміром шрифту.
Копіюйте й використовуйте
Копіюйте згенероване значення clamp() як CSS або SCSS. Результат — один рядок, який можна вставити в будь-яку властивість font-size, padding, margin чи gap.
Часті запитання
clamp(min, preferred, max) — CSS-функція, що обмежує значення між мінімумом і максимумом. Бажане значення (зазвичай відносне до ширини екрана) вільно масштабується в цих межах. Найчастіше її використовують для плинної типографіки.
Медіазапити дають різкі стрибки розміру на конкретних брейкпоінтах. clamp() забезпечує безперервне, плавне масштабування. Це спрощує CSS і робить адаптивну поведінку природнішою.
Так. clamp() працює з будь-якою CSS-властивістю, що приймає довжину: padding, margin, gap, width тощо. Плинні відступи роблять макети гармонійнішими й природно підлаштовують їх під розмір екрана.
Бажане значення має вигляд calc(Xrem + Yvw), де X — база, а Y — швидкість зміни. Інструмент обчислює обидва значення з ваших даних, тож розмір шрифту лінійно масштабується між заданими мінімальною й максимальною ширинами екрана.