⭐ 0
🔍
Text Imagine PDF și Documente Audio Muzică Electronică Timp Utilitare Validatoare Ezoterism Jocuri

Fluid Font Size Clamp() Generator

Calculați o valoare reală fluidă CSS clamp() dintr-o dimensiune minimă și maximă pe două lățimi ale ferestrei de vizualizare, cu panta și intersecția afișate pas cu pas și o previzualizare live a redimensionării.

Procesare... 0%

Rezultat

Această pagină deschide calculatorul cu o configurație fluidă de uz general pentru dimensiunea fontului deja completată: 16px la o fereastră de vizualizare de 320px până la 24px la o fereastră de vizualizare de 1280px. Acesta este o gamă confortabilă de la corp până la puțin mai mare, care se scalează fără probleme de la un ecran tipic de telefon la o fereastră tipică de desktop și este configurația pe care o înțeleg majoritatea oamenilor atunci când caută o clemă fluidă de dimensiunea fontului () în primul rând.

Cele patru numere pot fi schimbate: măriți dimensiunea maximă pentru un titlu, mai degrabă decât pentru textul corpului, sau restrângeți intervalul de vizualizare dacă designul trebuie doar să se întoarcă între o tabletă și un punct de întrerupere desktop. Orice ați introduce, panta și intersecția axei y sunt recalculate în același mod și afișate ca aritmetică explicită, nu ascunse în interiorul liniei finale.

Sub cele patru intrări, un glisor pentru lățimea ferestrei de vizualizare conduce o previzualizare live, astfel încât scalarea să fie vizibilă imediat, iar linia clamp() pregătită pentru copiere este la un clic distanță. Comutarea unității de ieșire între rem și px recalculează fiecare număr fără a atinge valorile dimensiunii minime și maxime.

🛡️
Rulat în browser

Fișierele și datele introduse nu părăsesc niciodată acest dispozitiv. Procesarea rulează complet offline. 100% sigur.

Formate și reguli acceptate

  • Matematică tipografie fluidă reală: panta, coeficientul vw și intersecția axei y prezentate în mod explicit, nu doar linia finală clamp().
  • Previzualizare live: trageți glisorul pentru lățimea ferestrei de vizualizare pentru a viziona textul eșantion redimensionat exact așa cum ar fi în timp ce o fereastră de browser reală este redimensionată.
  • Modul tip scară: o dimensiune de bază și un raport de la 1,125 la 1,5 generează șase pași fluid clamp() - mic, de bază, h4, h3, h2, h1 - ca CSS gata de copiere.

Beneficii cheie

✓ Linia clamp(), numerele de pantă și de intersecție și previzualizarea în direct se actualizează pe măsură ce tastați - fără buton de apăsat.
✓ Un glisor pentru lățimea ferestrei de vizualizare conduce o casetă de previzualizare live, astfel încât să vedeți scalarea fluidă exactă în acțiune între punctele de întrerupere minime și maxime, nu doar o formulă.
✓ Un mod separat de scară de tip transformă o dimensiune și un raport de bază într-o scară completă de direcție fluidă în 6 pași, gata ca un bloc de proprietăți personalizate CSS.

Cazuri de utilizare

  • • Transformați o dimensiune min/max a fontului și un interval de vizualizare într-o linie clamp() reală - panta, coeficientul vw și intersecția incluse - în loc să vedeți unul dintr-un tutorial.
  • • Trageți un glisor pentru lățimea ferestrei de vizualizare pentru a previzualiza o redimensionare a unui titlu fluid sau a dimensiunii corpului exact așa cum ar fi în timp ce o fereastră de browser reală este redimensionată, înainte de a o trimite într-o foaie de stil.
  • • Generați o scară completă de tip fluid în 6 trepte (de la mic până la h1) de la o dimensiune de bază și un raport, copiat ca un bloc gata de lipit de proprietăți personalizate CSS.
  • • Construiți un fluid clamp() pentru spațiere (marja, umplutură, decalaj) în loc de dimensiunea fontului - aceeași formulă de pantă/intersecție se aplică oricărei proprietăți CSS.