Calculator CSS clamp()
Introduceți dimensiunile pentru ecrane mici și mari și obțineți o valoare fluidă clamp() care se scalează armonios între ele — ideală pentru dimensiuni de font, padding, margini sau spațieri.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Rezultatul păstrează o componentă rem în termenul din mijloc, astfel încât textul se mărește în continuare atunci când utilizatorul folosește zoom-ul la 200% — o valoare bazată exclusiv pe viewport nu ar permite acest lucru.
Text fluid, perfect dimensionat.
Calculul se realizează în întregime în browserul dumneavoastră. Nimic din ceea ce introduceți aici nu este încărcat pe BroBroGo.
Întrebări frecvente
Cum generează calculatorul valoarea clamp()?
Îi oferiți două puncte de referință: o dimensiune pentru un ecran mic și o dimensiune pentru un ecran mare. Calculatorul trasează o linie dreaptă între acestea, astfel încât dimensiunea crește fluid pe măsură ce ecranul se lățește, apoi o încadrează în funcția clamp() pentru a nu scădea niciodată sub limita minimă și a nu depăși limita maximă. Între cele două lățimi, dimensiunea se scalează fluid; în afara lor, se plafonează la cea mai apropiată limită.
De ce rezultatul este exprimat în rem și vw în loc de pixeli?
Limitele sunt exprimate în rem, iar partea variabilă din mijloc păstrează o componentă rem, astfel încât textul continuă să crească atunci când cititorul folosește zoom-ul sau mărește dimensiunea implicită a fontului din browser — o valoare exprimată doar în pixeli sau unități de viewport poate bloca acest comportament. Introduceți dimensiunile în pixeli deoarece este modul cel mai intuitiv de lucru, iar instrumentul le convertește în rem pe baza dimensiunii de bază (root font size).
Pot folosi acest instrument și pentru spațieri, nu doar pentru dimensiunea fontului?
Da. Aceeași valoare funcționează pentru padding, margin, gap, lățime sau înălțime — oriunde se folosește o lungime. Comutați previzualizarea pe „Casetă” pentru a urmări modul în care se scalează spațierea în locul textului. Dacă dimensiunile minime și maxime sunt egale, rezultatul se reduce la o lungime fixă simplă, deoarece nu mai există nimic de scalat.
Toate browserele acceptă funcția clamp()?
Da — toate browserele moderne acceptă clamp() încă din 2020, așa că puteți folosi valoarea ca atare, fără o alternativă (fallback). În cazul unei valori maxime foarte mari sau al unei rate rapide de schimbare, se recomandă o verificare rapidă la zoom de 200% pentru a vă asigura că textul se mărește corect pentru utilizatorii care au nevoie de acest lucru.