CSS Clamp() kalkulátor

A CSS clamp(MIN, PREFERRED, MAX) lehetővé teszi, hogy egyetlen deklaráció egy egész halom media query-t helyettesítsen: az érték a legkisebb viewport alatt MIN marad, a legnagyobb felett MAX, és a kettő között folyékonyan skálázódik. A nehéz rész a PREFERRED tag – egy viewport-relatív kifejezés, például 0.833rem + 0.833vw –, amelyet senki sem akar kézzel levezetni. Ez a kalkulátor ezt valós időben számítja ki négy számból: egy minimális méretből, egy maximális méretből és a hozzájuk tartozó viewport-szélességből.

Minden közbenső szám megjelenik, nem csak a végső sor: a meredekség (hány mértékegységgel nő az érték képpontonként a viewport szélességében), ugyanez a meredekség vw együtthatóként kifejezve, és az y-tengelymetszet – a vw taghoz hozzáadott konstans, hogy a függvény pontosan átmenjen az Ön által megadott két ponton. Aki valaha is másolt be egy clamp() értéket egy oktatóanyagból anélkül, hogy megértette volna, itt láthatja és ellenőrizheti a tényleges számítást.

A viewport-szélesség csúszka egy élő előnézeti dobozt mozgat, így a folyékony méretezés nem csak kiszámításra kerül, hanem látható is: húzza el a minimum és maximum töréspontok között, és nézze, ahogy a mintaszöveg pontosan úgy méreteződik át, ahogy egy valódi böngészőablak átméretezésekor tenné. A kimeneti sor és a lebontás minden billentyűleütésre frissül – ez természetesen párosítható a px to rem konverterrel, amikor magát az alap betűméretet is konvertálni kell.

Váltson tipográfiai skála módra egy teljes folyékony tipográfiai rendszerért egy lépésben: adjon meg egy alapméretet és egy moduláris arányt (1,125-től 1,5-ig), és kapjon hat méretet – kicsi, alap, h4, h3, h2 és h1 – mindegyiket a saját clamp() soraként kiszámítva, egy enyhébb mobil progresszió és a teljes asztali arány között, készen arra, hogy kimásolja őket egy CSS egyéni tulajdonságok blokként.