CSS Clamp() Kalkulators

CSS clamp(MIN, PREFERRED, MAX) ļauj vienai deklarācijai aizstāt veselu kaudzi media query: vērtība paliek MIN zem mazākā skata loga, MAX virs lielākā un vienmērīgi mērogojas starp tiem. Sarežģītā daļa ir PREFERRED elements — uz skata logu attiecināma izteiksme, piemēram, 0.833rem + 0.833vw — ko neviens negrib atvasināt ar roku. Šis kalkulators to aprēķina reāli no četriem skaitļiem: minimālā izmēra, maksimālā izmēra un skata loga platuma, pie kura katrs no tiem attiecas.

Tiek parādīts katrs starpskaitlis, ne tikai gala rinda: slīpums (cik izmēra vienību vērtība pieaug uz vienu skata loga pikseli), tas pats slīpums izteikts kā vw koeficients un y-ass krustpunkts — konstante, kas pievienota vw elementam, lai līnija ietu cauri tieši diviem jūsu norādītajiem punktiem. Ikviens, kurš ir ielīmējis clamp() vērtību no pamācības, to nesaprotot, šeit var redzēt un pārbaudīt faktisko aritmētiku.

Skata loga platuma slīdnis vada tiešā priekšskatījuma lodziņu, tāpēc plūstošā mērogošanās ir redzama, nevis tikai aprēķināta: velciet to starp minimālo un maksimālo pārtraukumpunktu un vērojiet, kā parauga teksts maina izmēru tieši tā, kā tas notiktu, mainot reālu pārlūkprogrammas logu. Izvades rinda un sadalījums atjaunojas pie katra taustiņa spiediena — tas dabiski sader kopā ar px uz rem pārveidotāju, kad arī pašam bāzes fonta izmēram nepieciešama konvertēšana.

Pārslēdzieties uz burtu izmēru skalas režīmu, lai vienā solī iegūtu pilnīgu plūstošās tipogrāfijas sistēmu: ievadiet bāzes izmēru un modulāro attiecību (1,125 līdz 1,5) un iegūstiet sešus izmērus — mazs, bāze, h4, h3, h2 un h1 — katrs aprēķināts kā sava clamp() rinda starp maigāku mobilo progresiju un pilno darbvirsmas attiecību, gatavs kopēšanai kā CSS pielāgoto rekvizītu bloks.