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.

Veličine
Minimum
Maksimum
clamp() vrijednost
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.

Pregled

Fluidan tekst, savršeno odmjeren.

Podesite veličine i širine ekrana da oblikujete vrijednost.

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.

Napisao i pregledao urednički tim BroBroGo.Zadnji put ažurirano:

Kako funkcioniše Kalkulator za CSS clamp()

Kalkulator za CSS clamp() je alat koji izračunava CSS clamp() vrijednost koja omogućava da se veličina glatko skalira između minimalne i maksimalne vrijednosti na različitim širinama ekrana. Korisnik unosi veličinu za mali ekran i veličinu za veliki ekran, a alat na osnovu toga generiše clamp() funkciju. Ova funkcija osigurava da veličina nikada ne padne ispod unesene veličine za mali ekran, niti da naraste iznad veličine za veliki ekran, dok se u prostoru između njih skalira potpuno fluidno.

Generisana vrijednost se može primijeniti na različita svojstva dužine u CSS-u, uključujući veličine fonta, padding, margine, razmake (gap), kao i širinu ili visinu.

Unosni podaci i pravila izračunavanja

Da bi alat uspješno generisao vrijednost, potrebno je unijeti sljedeće parametre:

  • Veličina (Minimum): Broj koji predstavlja veličinu na maloj širini ekrana.
  • Širina ekrana (Minimum): Broj koji predstavlja širinu malog ekrana.
  • Veličina (Maksimum): Broj koji predstavlja veličinu na velikoj širini ekrana.
  • Širina ekrana (Maksimum): Broj koji predstavlja širinu velikog ekrana.
  • Osnovna (root) veličina fonta: Broj koji se koristi za pretvaranje unosa u pikselima u rem jedinice.

Alat očekuje ispravne brojeve u svakom polju za unos. Ako se unese nevažeći unos, prikazuje se poruka "Unesite važeći broj u svako polje.".

Također, širina malog ekrana mora biti manji pozitivan broj od širine velikog ekrana. Ako ovaj uslov nije ispunjen, izlazna clamp() vrijednost će biti prikazana kao —, uz poruku o grešci: "Širina malog ekrana mora biti manji pozitivan broj od širine velikog ekrana.".

Izlazni rezultati i vizuelni pregled

Nakon unosa ispravnih parametara, kalkulator generiše sljedeće izlazne podatke:

  • clamp() vrijednost: Izračunata CSS clamp() funkcija (na primjer: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)). Granice ove vrijednosti su izražene u rem jedinicama, a promjenjivi srednji dio zadržava rem komponentu.
  • Pregled: Vizuelni prikaz skaliranja koji se može postaviti u dva režima: "Tekst" (prikazuje se uzorak "Fluidan tekst, savršeno odmjeren.") ili "Okvir".
  • Širina pregleda: Numerički prikaz trenutne širine područja za pregled.

Tokom promjene širine ekrana u pregledu, alat prikazuje različite statuse koji opisuju trenutno stanje skaliranja:

  • "Podesite veličine i širine ekrana da oblikujete vrijednost."
  • "Obrnuto skaliranje — veličina se smanjuje kako ekran raste."
  • "Obje veličine su jednake, tako da je ovo fiksna vrijednost, a ne fluidna."
  • "zadržano na minimumu"
  • "zadržano na maksimumu"
  • "fluidno skaliranje"

Pristupačnost i upotreba rem jedinica

Jedna od ključnih prednosti ovog kalkulatora je automatsko pretvaranje piksela u rem jedinice pomoću unesene osnovne (root) veličine fonta.

Korištenje rem jedinica unutar clamp() funkcije je izuzetno važno za pristupačnost (accessibility). Kada se koristi ovaj kalkulator, generisana clamp() vrijednost je dizajnirana tako da osigura da tekst i dalje raste kada čitalac zumira stranicu ili poveća podrazumijevanu veličinu fonta u svom web pregledniku. Srednji dio funkcije zadržava rem komponentu pored vw (viewport width) komponente, što sprječava da tekst ostane zaključan na fiksnoj veličini tokom zumiranja, što bi se desilo da se koriste isključivo viewport jedinice.

Privatnost i obrada podataka

Korištenje ovog alata je u potpunosti privatno i sigurno. Proračun se u potpunosti vrši u Vašem pregledniku. Ništa što ovdje unesete ne šalje se na BroBroGo.

Često postavljana pitanja (FAQ)

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 umjestu 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.

CSS Cubic Bezier GeneratorPovucite dvije ručice da oblikujete krivu ubrzanja, posmatrajte kretanje tačke u poređenju sa ravnomjernim i kopirajte cubic-bezier() vrijednost.Generator za Box ShadowPovucite klizače da oblikujete box-shadow, slažite slojeve za dubinu i odmah kopirajte gotov CSS.Generator gradijenataKreirajte linearni, radijalni ili konusni gradijent, dodajte tačke prekida boje i postavite smjer, a zatim kopirajte CSS jednim klikom.Generator za Border RadiusZaoblite svaki ugao pomoću klizača, oblikujte organske mrlje pomoću eliptičnog režima i odmah kopirajte CSS.Flexbox GeneratorPostavite flex kontejner i njegove stavke pomoću vizuelnih kontrola, posmatrajte promjene uživo i kopirajte CSS jednim klikom.CSS Grid GeneratorPostavite kolone i redove, prevucite preko ćelija da postavite stavke i kopirajte CSS mreže sa odgovarajućim HTML-om jednim klikom.CSS Beautifier & MinifierPonovo uvucite neuredan CSS radi lakšeg čitanja ili ga minifikujte za brže učitavanje — uz siguran režim koji nikada ne mijenja redoslijed vaših pravila.Konverter iz px u rem i emKonvertujte između px, rem i em koristeći sopstvene osnovne i kontekstualne veličine fonta — uredite bilo koje polje i ostala dva se ažuriraju dok kucate.