Kalkulator CSS Clamp().
Izračunajte stvarnu fluidnu CSS vrijednost clamp() iz minimalne i maksimalne veličine preko dvije širine okvira za prikaz, s nagibom i sjecištem prikazanim korak po korak i pregledom promjene veličine uživo.
Rezultat
CSS stezaljka (MIN, PREFERRED, MAX) omogućuje da jedna deklaracija zamijeni cijeli hrp medijskih upita: vrijednost ostaje na MIN ispod najmanjeg okvira za prikaz, na MAX iznad najvećeg, a između se glatko skalira. Teži dio je POŽELJNI izraz — izraz relativan za polje prikaza kao što je 0,833rem + 0,833vw — koji nitko ne želi izvesti ručno. Ovaj kalkulator to izračunava stvarno od četiri broja: minimalne veličine, maksimalne veličine i širine okvira za prikaz na kojoj se svaki od njih primjenjuje.
Prikazan je svaki srednji broj, a ne samo konačna linija: nagib (za koliko jedinica veličine vrijednost raste po pikselu okvira za prikaz), taj isti nagib izražen kao vw koeficijent i sjecište y-osi — konstanta dodana vw izrazu tako da linija prolazi kroz točno dvije točke koje ste naveli. Svatko tko je zalijepio vrijednost clamp() iz vodiča, a da je nije razumio, može ovdje vidjeti i provjeriti stvarnu aritmetiku.
Klizač širine okvira za prikaz pokreće okvir za pregled uživo, tako da je fluidno skaliranje vidljivo, a ne samo izračunato: povucite ga između min. i maks. prijelomnih točaka i gledajte kako se veličina uzorka teksta mijenja točno onako kako bi se mijenjala veličina pravog prozora preglednika. Redak izlaza i raščlamba ažuriraju se pri svakom pritisku na tipku — to se prirodno uparuje s pretvaračem px u rem kada i samu osnovnu veličinu fonta treba pretvoriti.
Prebacite se na način rada s skalom tipa za potpun fluidni tipografski sustav u jednom koraku: unesite osnovnu veličinu i modularni omjer (1,125 do 1,5) i dobit ćete šest veličina — malu, osnovnu, h4, h3, h2 i h1 — svaka izračunata kao vlastita linija stezanja () između blažeg mobilnog napredovanja i punog omjera za radnu površinu, spremna za kopiranje kao blok CSS prilagođenih svojstava.