Перайсці да асноўнага зместу
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

Адлюстраваны памер пры розных viewport-ах

375px шырыніAa 16px
908px шырыніAa 24px
1440px шырыніAa 32px

clamp(min, preferred, max) плаўна маштабуе значэнне разам з viewport, затым фіксуецца на мін і макс. Замяняе стэкі медыязапытаў для тыпаграфіі, водступаў і шырынь адным радком.

Тыповыя выкарыстанні

  • Стварайце тякучую расцяжную тыпографіюПлынна масштабуйце памеры шрыфтаў паміж мабільнымі і дэстопам з адной лініяй.
  • Тякучыя полямі і абітацыюЗробіце інтэрвалы раздзелаў расці з портом замест скачка ў зальмань.
  • Заменьце медыйныя запрасы 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.

Паспрабуйце

Часта задаюць пытанні