Kalkulator za CSS clamp()
Unesite veličinu za male i velike ekrane i dobićete fluidnu clamp() vrijednost koja se glatko skalira između njih — za veličine fonta, padding, margine ili razmake.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Rezultat zadržava rem dio u srednjem članu, tako da se tekst i dalje povećava kada korisnik zumira na 200% — vrijednost zasnovana samo na viewport-u to ne bi omogućila.
Fluidan tekst, savršeno odmjeren.
Proračun se u potpunosti vrši u Vašem pregledniku. Ništa što ovdje unesete ne šalje se na BroBroGo.
Česta pitanja
Kako kalkulator gradi clamp() vrijednost?
Zadajete mu dvije tačke: veličinu na maloj širini ekrana i veličinu na velikoj. Kalkulator povlači pravu liniju između njih tako da veličina glatko raste kako se ekran širi, a zatim je obmotava u clamp() tako da nikada ne padne ispod veličine za mali ekran niti pređe veličinu za veliki ekran. Između te dvije širine veličina se fluidno prilagođava; izvan njih se zadržava na najbližoj granici.
Zašto je rezultat u rem i vw umjesto u pikselima?
Granice su u rem jedinicama, a promjenjivi srednji dio zadržava rem komponentu, tako da tekst i dalje raste kada čitalac zumira ili poveća podrazumijevanu veličinu fonta u pregledniku — vrijednost izražena samo u pikselima ili viewport jedinicama može to spriječiti. Veličine unosite u pikselima jer većina ljudi tako razmišlja o njima, a alat ih pretvara u rem koristeći Vašu osnovnu (root) veličinu fonta.
Mogu li ovo koristiti za razmake, a ne samo za veličinu fonta?
Da. Istu vrijednost možete koristiti za padding, margin, gap, širinu ili visinu — bilo gdje gdje ide dužina. Prebacite pregled na "Okvir" da vidite kako se razmaci šire umjesto teksta. Ako su Vaša mala i velika veličina iste, rezultat se svodi na običnu fiksnu dužinu, jer nema šta da se skalira.
Da li svi preglednici podržavaju clamp()?
Da — svi moderni preglednici podržavaju clamp() od 2020. godine, tako da vrijednost možete koristiti direktno bez alternativnih rješenja. Pri veoma velikom maksimumu ili brzoj stopi promjene, vrijedi na brzinu provjeriti pri zumiranju od 200% da li se tekst i dalje povećava za čitaoce kojima je to potrebno.