⭐ 0
🔍
Tekst Slika PDF i dokumenti Audio Glazba Elektronika Vrijeme Komunalije Validatori Ezoterija Igre

CSS Clamp() Kalkulator

Izračunajte stvarnu fluidnu CSS clamp() vrijednost iz minimalne i maksimalne veličine preko dvije širine prikaza, s nagibom i sjecištem prikazanim korak po korak i pregledom promjene veličine uživo.

🔒 U potpunosti se obrađuje u vašem pregledniku — ništa što ovdje unesete nikada se ne učitava.

Obrada... 0%

Rezultat

CSS clamp(MIN, PREFERRED, MAX) omogućuje da jedna deklaracija zamijeni cijeli niz media queryja: vrijednost ostaje na MIN ispod najmanjeg prikaza, na MAX iznad najvećeg, a između se glatko skalira. Težak dio je PREFERRED izraz — izraz relativan prema prikazu kao što je 0,833rem + 0,833vw — koji nitko ne želi izvoditi ručno. Ovaj kalkulator ga izračunava stvarno iz četiri broja: minimalne veličine, maksimalne veličine i širine prikaza na kojoj se svaka primjenjuje.

Prikazan je svaki međubrojevi, a ne samo konačna linija: nagib (koliko jedinica veličine vrijednost raste po pikselu prikaza), taj isti nagib izražen kao vw koeficijent i sjecište s y-osi — konstanta dodana vw izrazu tako da linija prolazi točno kroz dvije točke koje ste naveli. Svatko tko je zalijepio clamp() vrijednost iz vodiča bez da ju razumije ovdje može vidjeti i provjeriti stvarnu aritmetiku.

Kliznik širine prikaza pokreće okvir za pregled uživo, tako da je fluidno skaliranje vidljivo, a ne samo izračunato: povucite ga između minimalne i maksimalne prijelomne točke i gledajte kako se ogledni tekst mijenja točno onako kako bi se mijenjao prilikom promjene veličine stvarnog prozora preglednika. Izlazna linija i raščlamba ažuriraju se sa svakim pritiskom tipke — ovo se prirodno uparuje s px to rem pretvaračem kada i samu osnovnu veličinu fonta treba pretvoriti.

Prebacite se na način rada ljestvice veličina za potpuni fluidni tipografski sustav u jednom koraku: unesite osnovnu veličinu i modularni omjer (1,125 do 1,5) i dobijte šest veličina — mali, osnovni, h4, h3, h2 i h1 — svaka izračunata kao vlastita clamp() linija između blaže mobilne progresije i punog stolnog omjera, spremna za kopiranje kao blok CSS prilagođenih svojstava.

Uživate u ovom alatu? Mislite da je ovaj proizvod koristan? Vidite potencijal u njemu i želite ga podržati?

🛡️
Izvršava se u pregledniku

Vaše datoteke i unosi nikad ne napuštaju ovaj uređaj. Obrada se odvija potpuno izvan mreže. 100% sigurno.

Prihvaćeni formati i pravila

  • Prava matematika fluidne tipografije: nagib, vw koeficijent i sjecište s y-osi prikazani su eksplicitno, ne samo konačna linija s clamp().
  • Pregled uživo: povucite kliznik širine prikaza kako biste gledali kako se ogledni tekst mijenja točno onako kako bi se mijenjao prilikom promjene veličine stvarnog prozora preglednika.
  • Način rada ljestvice veličina: osnovna veličina i omjer od 1,125 do 1,5 generiraju šest fluidnih clamp() koraka — mali, osnovni, h4, h3, h2, h1 — kao CSS spreman za kopiranje.

Ključne prednosti

✓ Linija clamp(), vrijednosti nagiba i sjecišta te pregled uživo ažuriraju se dok tipkate — bez pritiskanja gumba.
✓ Kliznik širine prikaza pokreće okvir za pregled uživo, tako da vidite točno fluidno skaliranje na djelu između minimalne i maksimalne prijelomne točke, a ne samo formulu.
✓ Zaseban način rada za ljestvicu veličina pretvara jednu osnovnu veličinu i omjer u punu fluidnu ljestvicu naslova od 6 stupnjeva, spremnu kao blok CSS prilagođenih svojstava.

Slučajevi upotrebe

  • • Pretvorite min/max veličinu fonta i raspon viewporta u stvarnu clamp() liniju — uključujući nagib, vw koeficijent i sjecište — umjesto da vrijednosti nagađate iz tutorijala.
  • • Povucite klizač širine viewporta za pregled fluidnog naslova ili veličine teksta koji se mijenja točno onako kako bi se mijenjao u stvarnom pregledniku, prije nego što ga dodate u stylesheet.
  • • Generirajte cijelu fluidnu tipografsku ljestvicu od 6 koraka (od small do h1) iz jedne osnovne veličine i omjera, kopiranu kao blok CSS prilagođenih svojstava spreman za lijepljenje.
  • • Izradite fluidni clamp() za razmake (margin, padding, gap) umjesto za veličinu fonta — ista formula nagiba i sjecišta primjenjuje se na bilo koje CSS svojstvo.