CSS Clamp() kalkulátor

A CSS befogó (MIN, PREFERRED, MAX) lehetővé teszi, hogy egyetlen deklaráció helyettesítse a médialekérdezések egész kötegét: az érték MIN marad a legkisebb nézetablak alatt, MAX a legnagyobb felett, és egyenletesen skálázódik közöttük. A kemény rész a PREFERRED kifejezés – egy nézetablak-relatív kifejezés, például 0,833rem + 0,833vw –, amelyet senki sem akar kézzel származtatni. Ez a számológép négy számból valósan számítja ki: a minimális méret, a maximális méret és a nézetablak szélessége, amelyre mindegyik vonatkozik.

Minden közbülső szám megjelenik, nem csak a végső sor: a meredekség (hány méretegységgel nő az érték a nézetablak pixelénként), ugyanaz a lejtő, amelyet vw-együtthatóként fejezünk ki, és az y-tengely metszéspontja – a vw taghoz hozzáadott állandó, így a vonal pontosan az Ön által megadott két ponton halad át. Bárki, aki beillesztett egy clamp() értéket egy oktatóanyagból anélkül, hogy megértette volna, itt láthatja és ellenőrizheti a tényleges aritmetikát.

A nézetablak szélességét mutató csúszka meghajt egy élő előnézeti mezőt, így a folyékony méretezés látható, nem csak kiszámítva: húzza a minimális és maximális töréspontok közé, és figyelje meg, hogy a minta szövege pontosan úgy méreteződik át, mint egy valódi böngészőablak átméretezése közben. A kimeneti sor és a lebontás frissítése minden billentyűleütéskor – ez természetesen párosul a px to rem konverterrel, amikor magát az alap betűméretet is konvertálni kell.

Egy lépésben váltson át típusskálás módra egy komplett folyékony tipográfiai rendszerhez: adja meg az alapméretet és a moduláris arányt (1,125-től 1,5-ig), és kap hat méretet – kicsi, alap, h4, h3, h2 és h1 – mindegyiket saját clamp() vonalként számítja ki a gyengédebb mobil progresszió és a teljes asztali arány között a CSS egyedi tulajdonságokként, másolásra készen.