CSS Clamp Generator
Налаштування clamp
Property
Size range
Viewport range
Status
Idle
Live preview
A
Fluid clamp preview
B
Про CSS Clamp Generator
CSS clamp() дозволяє задати мінімальне значення, гнучке preferred значення і максимальне значення в одному виразі. Це особливо корисно для fluid typography і responsive spacing.
Цей генератор рахує clamp() expression на основі мінімального та максимального розміру і viewport діапазону, в якому значення має плавно змінюватися.
Як користуватися
- Виберіть CSS property, для якої треба згенерувати значення.
- Задайте minimum і maximum size.
- Задайте viewport range, в якому значення має масштабуватися.
- Скопіюйте clamp() value або повний CSS rule.
Поради
- Використовуйте clamp() для заголовків, які мають плавно масштабуватися між mobile і desktop.
- Для padding або gap clamp() часто дозволяє прибрати зайві breakpoint rules.
- Minimum viewport має бути меншим за maximum viewport.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.
CSS Unit Converter
Конвертуйте CSS-одиниці px, rem, em, %, vw і vh з урахуванням базового шрифту, розміру батьківського елемента та viewport.
Інші інструменти
›
CSS Media Query Generator
Створюйте responsive CSS media queries для брейкпоінтів, орієнтації, dark mode, reduced motion і hover support.
Інші інструменти
›
CSS Container Query Generator
Генеруйте CSS container queries з container type, container name, breakpoint-умовами та responsive CSS declarations.
Інші інструменти
›
CSS Grid Generator
Створюй CSS Grid layouts з колонками, рядками, відступами, вирівнюванням, live preview і готовим CSS.
Інші інструменти
›
CSS Clamp Generator FAQ
Що робить CSS clamp()?
Він обмежує значення між мінімумом і максимумом, дозволяючи preferred значенню плавно змінюватися між ними.
Чи підходить clamp() для responsive typography?
Так. Це один із найзручніших способів зробити fluid font-size без великої кількості media queries.
Чи можна використовувати clamp() для spacing?
Так. clamp() працює з padding, margin, gap, width та багатьма іншими CSS properties із length values.
Чи замінює clamp() media queries?
Не повністю. Він зменшує потребу в частині breakpoint rules, але media queries все ще потрібні для зміни layout.