Generator CSS clamp() — gratuit
Generează o valoare CSS clamp() fluidă pentru tipografie și spațiere responsive. Setează dimensiunea min/max și intervalul de viewport, vizualizează o previzualizare live și copiază CSS-ul pe o singură linie.
Dimensiune redată la diferite viewport-uri
clamp(min, preferred, max) scalează fluid o valoare cu viewport-ul, apoi se blochează la min și max. Înlocuiește seturi de media queries pentru tipografie, spațiere și lățimi cu o singură linie.
Utilizări frecvente
- Creați tipografie fluidă receptivăScara dimensiunilor fontului lin între mobil și desktop cu o linie.
- Marja fluidă și umplereObțineți distanța secțiunii să crească cu vizualizarea în loc să sară la puncte de întrerupere.
- Înlocuiți interogările media cu clamp()Prăbușiți cioturi de suprascriere a punctelor de întrerupere într-o singură valoare fluidă.
- Construiți o scală de tip fluidGenerați pași clamp() consecvenți pentru o scală de tip sistem de design.
- Titluri erou și afișare fluideFaceți titluri mari de pagină de destinație să se scaleze dramatic, dar totuși sigur.
Cum funcționează
Această unealtă calculează valori CSS clamp() folosind o formulă de interpolare liniară scrisă manual — fără biblioteci, fără călătorii dus-întors la server. Introduci două dimensiuni și două lățimi de viewport; matematica rulează instant în browser-ul tău și produce o expresie clamp() gata de lipit, cu o valoare preferată bazată pe vw care scalează fluid tipul sau spațierea ta între acele puncte de întrerupere.
- 1Calculul pantei liniareUnealta calculează o pantă pixel-la-pixel: (dimensiuneMax - dimensiuneMin) / (viewportMax - viewportMin). Această pantă este apoi convertită în unități vw înmulțind cu 100, ceea ce este esența modului în care funcționează scalarea relativă la viewport CSS.
- 2Derivarea interceptuluiUn decalaj de intercept (în px sau rem) este calculat astfel încât funcția liniară să atingă exact dimensiunea ta minimă la viewport-ul minim. Împreună, panta și interceptul formează valoarea preferată din interiorul clamp() — partea care de fapt se scalează.
- 3Conversia unităților și formatarea ieșiriiDacă alegi ieșire rem, fiecare valoare în pixeli este împărțită la dimensiunea configurată a fontului rădăcină (implicit 16px) înainte de a fi scrisă în șirul clamp(). O clasă Tailwind cu valoare arbitrară corespunzătoare este de asemenea produsă, cu spații înlocuite cu underscore-uri conform sintaxei Tailwind.
- 4Previzualizare live cu cursor viewportUn cursor de tip range îți permite să navighezi de la 320px la 1920px lățime. La fiecare poziție aceeași formulă de pantă și intercept evaluează dimensiunea clamp-uită în timp real și randază text de eșantion la acea dimensiune de pixeli calculată, astfel încât poți vedea comportamentul de scalare înainte de a copia ceva.
Instrumente similare
Generator CSS Grid
Proiectați vizual un CSS grid — tracks, unități și spații — și copiați CSS și HTML generat.
Care este rezoluția ecranului meu
Vezi rezoluția ecranului tău în pixeli CSS și reali, dimensiunea ferestrei, raportul de pixeli, adâncimea culorii, HDR, suportul tactil și rata de reîmprospătare și copiază totul.
Creator de Semnătură
Desenează o semnătură cu mouse-ul, degetul sau stylus-ul, sau scrie-ți numele într-un font de scris de mână, apoi exportă-l ca PNG sau SVG transparent.