CSS Clamp() kalkulaator
Arvutage tegelik voolav CSS clamp() väärtus minimaalse ja maksimaalse suuruse põhjal kahe vaateava laiuse lõikes, kus kallet ja ristmikku näidatakse samm-sammult ning reaalajas suuruse muutmise eelvaade.
Tulemus
CSS-i klamber (MIN, EELISTATUD, MAX) võimaldab ühe deklaratsiooniga asendada terve virna meediumipäringuid: väärtus jääb MIN-i väikseima vaateava alla, MAX-i suurimasse ja mastaapib sujuvalt vahepeal. Raske osa on EELISTATUD termin – vaateava suhteline avaldis, näiteks 0,833rem + 0,833vw –, mida keegi ei taha käsitsi tuletada. See kalkulaator arvutab selle reaalselt välja nelja numbri põhjal: minimaalne suurus, maksimaalne suurus ja vaateava laius, mille puhul igaüks neist kehtib.
Kuvatakse iga vahearv, mitte ainult viimane rida: kalle (mitu suurusühikut väärtus kasvab vaateava piksli kohta), sama kalle, väljendatuna vw koefitsiendina, ja y-telje lõikepunkt – konstant, mis lisatakse vw liikmele, nii et joon läbib täpselt kahte teie määratud punkti. Igaüks, kes on kleepinud õpetusest clamp() väärtuse ilma sellest aru saamata, saab siin näha ja kontrollida tegelikku aritmeetikat.
Vaateava laiuse liugur juhib reaalajas eelvaatekasti, nii et vedeliku skaleerimine on nähtav, mitte ainult arvutatud: lohistage see minimaalse ja maksimaalse katkestuspunkti vahel ja vaadake, kuidas näidisteksti suurus muutub täpselt nii, nagu see muutuks tegeliku brauseriakna suuruse muutmisel. Väljundrida ja jaotuse värskendus iga klahvivajutuse korral – see seostub loomulikult px-rem-muunduriga, kui ka põhifondi suurus ise vajab teisendamist.
Lülituge tüübiskaala režiimile täieliku vedela tüpograafiasüsteemi jaoks ühe sammuga: sisestage põhisuurus ja moodulsuhe (1,125 kuni 1,5) ning hankige kuus suurust – väike, alus, h4, h3, h2 ja h1 –, millest igaüks arvutatakse oma clamp() joonena õrnema mobiilse edenemise ja täieliku töölaua suhte vahel, mis on CSS-i kohandatud omadustena kopeerimiseks valmis.