Ingyenes CSS clamp() generátor
Generálj folyékony CSS clamp() értéket reszponzív tipográfiához és közbeiktatáshoz. Állítsd be a min/max méretet és a nézetablak-tartományt, tekintsd meg az élő előnézetet, és másold az egysoros CSS-t.
Megjelenített méret különböző viewportoknál
A clamp(min, preferred, max) folyékonyan méretezi az értéket a viewporttal, majd a minimumnál és maximumnál rögzül. Egyetlen sorral helyettesíti a tipográfia, térköz és szélességek médialekérdezés-halmazait.
Gyakori felhasználások
- Hozzon létre szövegséges reagálható tipográfiátA betűméretet simán méretezze a mobil és az asztal között egy sorral.
- Folyékony szarv és dolgozatokAz egyenletes távolságot a nézőporttal együtt nőjön az utódpontok helyett.
- Cserélje ki a média lekérdezéseit a clamp() szobávalAz egyenletes kimenetek sokaságát egy egyetlen folyadék értékbe szívassa be.
- Hozzon létre egy szövegséges típus skálátHozzon létre konzisztens clamp() lépéseket egy tervezett típus skálához.
- Hős- és kijelző szövegségekTegyük meg a nagy céloldal fejléceket drámaian, de továbbra is biztonságosan méretez.
Hogyan működik
Ez az eszköz CSS clamp() értékeket számít ki egy kézzel írt lineáris interpolációs képlettel — nincs könyvtár, nincs szerver-oda-vissza. Megad két méretet és két viewport-szélességet; a matematika azonnal fut a böngészőjében, és előállít egy beillesztésre kész clamp() kifejezést egy vw-alapú preferált értékkel, amely simán skálázza a szöveget vagy térközt a törésponti értékek között.
- 1Lineáris meredekség-számításAz eszköz kiszámít egy pixelenkénti meredekséget: (maxMéret - minMéret) / (maxViewport - minViewport). Ez a meredekség ezután vw egységekre kerül átváltásra 100-zal szorozva, ami a CSS viewport-relatív skálázás lényege.
- 2Metszéspont levezetéseEgy metszéspont-eltolás (px-ben vagy rem-ben) kerül kiszámításra úgy, hogy a lineáris függvény pontosan a minimális méretét érje el a minimális viewportnál. Együtt a meredekség és a metszéspont alkotja a preferált értéket a clamp()-en belül — a ténylegesen skálázódó részt.
- 3Mértékegység-átváltás és kimenet-formázásHa rem kimenetet választ, minden pixelérték osztásra kerül az Ön konfigurált gyökér betűméretével (alapértelmezetten 16px), mielőtt a clamp() karakterláncba kerülne. Egy megfelelő Tailwind tetszőleges-érték osztály is előáll, a szóközök aláhúzásokra cserélve a Tailwind szintaxis szerint.
- 4Élő viewport-csúszka előnézetEgy tartomány-csúszka lehetővé teszi, hogy 320px-től 1920px-ig görgesse a szélességet. Minden pozíciónál ugyanaz a meredekség-metszéspont képlet valós időben kiértékeli a korlátozott méretet, és mintaszöveget renderel a kiszámított pixelméretben, így láthatja a skálázási viselkedést bármi másolása előtt.
Kapcsolódó eszközök
CSS Grid generátor
Vizuálisan tervezzen meg egy CSS gridot — sávok, egységek és hézagok — és másolja ki a generált CSS-t és HTML-t.
Mi a képernyőfelbontásom
Lásd a képernyőd felbontását CSS és valós képpontokban, az ablakméretet, a pixelarányt, a színmélységet, a HDR-t, az érintéstámogatást és a képfrissítési frekvenciát, és másold ki az egészet.
Aláírás-készítő
Rajzoljon aláírást egérrel, ujjal vagy tollal, vagy gépelje be nevét kézírás betűtípussal, majd exportálja átlátszó PNG-ként vagy SVG-ként.