Перейти до основного вмісту
LibraTool logoLibraTool

Генератор CSS clamp() — безкоштовно

Генеруйте гнучке значення CSS clamp() для адаптивної типографіки та відступів. Встановіть мінімальний/максимальний розмір та діапазон вікна, перегляньте результат і скопіюйте однорядковий CSS.

Працює офлайн після завантаження
Одиниця виводу:
Значення CSS
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Клас Tailwind
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px завширшки → 21.9px
Aa 22px

Розмір за різної ширини вікна

375px завширшкиAa 16px
908px завширшкиAa 24px
1440px завширшкиAa 32px

clamp(min, preferred, max) плавно масштабує значення разом із вікном перегляду, потім фіксується на мін. і макс. Замінює стоси медіа-запитів для типографіки, відступів і ширин одним рядком.

Типові застосування

  • Створіть Плинну Адаптивну ТипографіюМасштабуйте розміри шрифтів без перепадів між мобільним та настільним з одним рядком.
  • Плинні Маржі та ДистанціяЗробіть розміри розділу зростати з вікном замість стрибків на точках розриву.
  • Замініть Медійні Запити на clamp()Згорніть стеки переривань точок розриву в одне плинне значення.
  • Складіть Плинну Шкалу ТипуГенеруйте послідовні кроки clamp() для типографічної шкали системи дизайну.
  • Плинні Герой та Заголовки ДисплеяМасштабуйте великі заголовки цільової сторінки драматично, але безпечно.

Як це працює

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

  1. 1
    Обчислення лінійного нахилу
    Інструмент обчислює нахил піксель на піксель: (maxSize - minSize) / (maxViewport - minViewport). Потім цей нахил переводиться в одиниці vw множенням на 100 — у цьому суть масштабування CSS відносно вікна перегляду.
  2. 2
    Обчислення зсуву
    Обчислюється зсув (у px або rem), щоб лінійна функція точно давала мінімальний розмір при мінімальній ширині вікна. Разом нахил і зсув утворюють бажане значення всередині clamp() — ту частину, що справді масштабується.
  3. 3
    Перетворення одиниць і форматування результату
    Якщо вибрано вивід у rem, кожне значення в пікселях ділиться на заданий кореневий розмір шрифту (за замовчуванням 16px) перед записом у рядок clamp(). Також створюється відповідний клас Tailwind з довільним значенням, де пробіли замінено підкресленнями за синтаксисом Tailwind.
  4. 4
    Живий перегляд із повзунком вікна
    Повзунок дозволяє змінювати ширину від 320px до 1920px. На кожній позиції та сама формула нахилу й зсуву в реальному часі обчислює обмежений розмір і рендерить зразок тексту з цим розміром у пікселях, тож ви бачите поведінку масштабування ще до копіювання.

Схожі інструменти

🟦

Генератор CSS Grid

Візуально розробіть CSS grid — доріжки, одиниці та проміжки — та скопіюйте згенеровані CSS і HTML.

Спробувати
📐

Яка роздільна здатність мого екрана

Подивіться роздільну здатність екрана в CSS і реальних пікселях, розмір вікна, співвідношення пікселів, глибину кольору, HDR, підтримку дотиків і частоту оновлення, а також скопіюйте все це.

Спробувати
Популярне
✍️

Створення підпису

Намалюйте підпис мишею, пальцем чи стилусом або надрукуйте ім’я рукописним шрифтом, а потім експортуйте його як прозорий PNG або SVG.

Спробувати

Часті запитання