Към основното съдържание
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) мащабира стойност плавно с ширината на прозореца, след което я заключва на минимума и максимума. Заменя набори от медийни заявки за типография, разстояния и ширини с един ред.

Често срещани употреби

  • Създайте течна адаптивна типографияБезпроблемно мащабирайте размерите на шрифта между мобилни и работни станции с един ред.
  • Течни маржини и допълнениеНакарайте разстоянията между секциите да растат заедно с прозореца, вместо да скачат при breakpoint-ите.
  • Замени медийните запитвания с 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 мрежа — записи, единици и празнини — и копирайте генерирания CSS и HTML.

Опитайте
📐

Каква е разделителната способност на екрана ми

Вижте разделителната способност на екрана си в CSS и реални пиксели, размера на прозореца, съотношението на пикселите, дълбочината на цвета, HDR, поддръжката на допир и честотата на опресняване, и копирайте всичко.

Опитайте
Популярно
✍️

Създаване на подпис

Нарисувайте подпис с мишката, пръста или писалката си, или напишете името си с шрифт за почерк, след което го експортирайте като прозрачен PNG или SVG.

Опитайте

Често задавани въпроси