CSS Clamp() kalkulators
Aprēķiniet reālu šķidru CSS clamp() vērtību no minimālā un maksimālā izmēra divos skata loga platumos, soli pa solim parādot slīpumu un krustojumu, kā arī reāllaika izmēru maiņas priekšskatījumu.
Rezultāts
CSS skava (MIN, VĒLAMĀ, MAX) ļauj ar vienu deklarāciju aizstāt veselu multivides vaicājumu kaudzi: vērtība paliek MIN zem mazākā skata loga, MAX virs lielākā un vienmērīgi mērogojas starp tām. Sarežģītākā daļa ir VĒLAMAIS termins — skata porta relatīvā izteiksme, piemēram, 0,833rem + 0,833vw — ko neviens nevēlas iegūt ar roku. Šis kalkulators to reāli aprēķina no četriem skaitļiem: minimālais izmērs, maksimālais izmērs un skata loga platums, uz kuru katrs attiecas.
Tiek parādīts katrs starpskaitlis, ne tikai pēdējā līnija: slīpums (cik lieluma vienību vērtība pieaug uz vienu skatu punkta pikseļu), tas pats slīpums, kas izteikts kā vw koeficients, un y ass krustpunkts — konstante, kas pievienota vw vārdam, lai līnija iet cauri tieši diviem jūsu norādītajiem punktiem. Ikviens, kurš ir ielīmējis clamp() vērtību no apmācības, to nesaprotot, šeit var redzēt un pārbaudīt faktisko aritmētiku.
Skatu loga platuma slīdnis vada tiešā priekšskatījuma lodziņu, tāpēc šķidrā mērogošana ir redzama, nevis tikai aprēķināta: velciet to starp minimālo un maksimālo pārtraukuma punktu un skatieties, kā teksta paraugs tiek mainīts tieši tā, kā tas notiktu, mainot reāla pārlūkprogrammas loga izmērus. Izvades līnijas un sadalījuma atjauninājums katrā taustiņsitienā — tas dabiski tiek savienots ar pikseļu uz rem pārveidotāju, ja ir jākonvertē arī pamata fonta lielums.
Vienā solī pārslēdzieties uz tipa skalas režīmu pilnīgai plūstošai tipogrāfijas sistēmai: ievadiet bāzes izmēru un moduļu attiecību (no 1,125 līdz 1,5) un iegūstiet sešus izmērus — mazs, pamats, h4, h3, h2 un h1 — katrs tiek aprēķināts kā sava clamp() līnija starp saudzīgāku mobilo progresu un pilnu darbvirsmas attiecību, kas ir gatava kopēšanai kā pielāgota CSS bloka rekvizīti.