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

Generator de scară de tip fluid

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 direct în modul scară de tip, cu o bază de 16 px și un raport de 1,25 (treimea majoră) deja selectat - un punct de plecare solid, utilizat pe scară largă pentru o scară tipografică. Numai din aceste două numere, sunt generate șase dimensiuni: mic, de bază, h4, h3, h2 și h1, fiecare valoarea sa fluid clamp() mai degrabă decât o singură dimensiune fixă.

Fiecare pas menține dimensiunea de bază ancorată la aceeași valoare atât pe partea mobilă, cât și pe cea a desktopului, în timp ce titlurile cresc mai agresiv pe fereastra de vizualizare mai largă a desktopului decât pe cea mobilă îngustă - aceeași idee ca și alegerea unui raport mai blând pentru ecranele mici și unul mai îndrăzneț pentru ecranele mari, derivat automat din raportul unic pe care îl alegeți.

Schimbarea raportului la 1.125, 1.2, 1.333 sau 1.5 regenerează întregul tabel instantaneu, iar butonul de dedesubt copiază toate cele șase valori clamp() ca un bloc gata de lipit de proprietăți personalizate CSS pentru care restul foii de stil să facă referire.

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