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

Calculator CSS Clamp().

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(MIN, PREFERRED, MAX) permite unei declarații să înlocuiască un întreg teanc de interogări media: valoarea rămâne la MIN sub cea mai mică fereastră de vizualizare, la MAX deasupra celei mai mari și se scalează ușor între ele. Partea grea este termenul PREFERAT - o expresie relativă a ferestrei de vizualizare, cum ar fi 0,833rem + 0,833vw - pe care nimeni nu vrea să o obțină manual. Acest calculator îl calculează real din patru numere: o dimensiune minimă, o dimensiune maximă și lățimea ferestrei de vizualizare la care se aplică fiecare.

Fiecare număr intermediar este afișat, nu doar linia finală: panta (câte unități de dimensiune crește valoarea pe pixelul ferestrei de vizualizare), aceeași pantă exprimată ca un coeficient vw și intersecția axei y - constanta adăugată la termenul vw, astfel încât linia să treacă prin exact cele două puncte pe care le-ați specificat. Oricine a lipit o valoare clamp() dintr-un tutorial fără să o înțeleagă poate vedea și verifica aritmetica reală aici.

Un glisor pentru lățimea ferestrei de vizualizare conduce o casetă de previzualizare live, astfel încât scalarea fluidă este vizibilă, nu doar calculată: trageți-o între punctele de întrerupere minime și maxime și urmăriți ca textul eșantion să se redimensioneze exact așa cum ar fi în timp ce o fereastră de browser reală este redimensionată. Linia de ieșire și defalcarea se actualizează la fiecare apăsare a tastei - aceasta se împerechează în mod natural cu convertorul px în rem atunci când dimensiunea fontului de bază în sine trebuie convertită.

Treceți la modul la scară de tip pentru un sistem complet de tipografie fluidă într-un singur pas: introduceți o dimensiune de bază și un raport modular (1,125 până la 1,5) și obțineți șase dimensiuni - mic, bază, h4, h3, h2 și h1 - fiecare calculată ca propria linie clamp() între o progresie mobilă mai blândă și raportul complet al desktopului, gata de copiat ca bloc de proprietăți personalizate CSS.

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