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

Fluid Spacing 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

CSS clamp() funcționează exact în același mod pentru spațiere ca și pentru dimensiunea fontului - proprietatea se întâmplă să fie margine, umplutură sau decalaj în loc de dimensiunea fontului. Această pagină deschide calculatorul cu o gamă de 8 px până la 32 px într-o fereastră de vizualizare de 320 px până la 1280 px, un pas obișnuit pentru umplerea secțiunilor sau spațiile de card care ar trebui să fie strânse pe un telefon și spațioase pe un desktop fără o interogare media la vedere.

Matematicilor care stau la baza nu le pasă ce reprezintă numerele: aceeași pantă și aceeași formulă de intersecție a axei y care produce o dimensiune fluidă a antetului produce o valoare de spațiere fluidă, așa că defalcarea de mai jos arată exact cum 8px și 32px se transformă într-o linie clamp() gata de copiere pentru umplutură: clamp(...).

Trageți glisorul pentru lățimea ferestrei de vizualizare pentru a previzualiza cum s-ar simți spațierea la orice lățime între cele două puncte de întrerupere, ajustați valorile minime și maxime pentru un interval mai strâns sau mai lasat și copiați linia finală direct în orice proprietate de spațiere are nevoie.

🛡️
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.