CSS clamp() skaičiuoklė
Įveskite dydį mažiems ir dideliems ekranams ir gaukite kintančią clamp() reikšmę, kuri sklandžiai prisitaiko – šriftams, paraštėms ar tarpams.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Rezultato viduriniajame naryje išlaikoma „rem“ dalis, todėl tekstas vis tiek padidėja, kai vartotojas priartina vaizdą iki 200% – naudojant tik ekrano srities (viewport) reikšmę taip nebūtų.
Sklandus tekstas, idealiai pritaikytas dydis.
Skaičiavimas atliekamas visiškai jūsų naršyklėje. Jokie įvesti duomenys nėra siunčiami į „BroBroGo“.
DUK
Kaip skaičiuoklė sukuria clamp() reikšmę?
Nurodote du taškus: dydį esant mažam ekrano pločiui ir dydį esant dideliam pločiui. Skaičiuoklė nubrėžia tiesią liniją tarp jų, kad dydis tolygiai augtų plečiantis ekranui, ir apgaubia ją funkcija „clamp()“, kad dydis niekada nenukristų žemiau jūsų nustatyto minimumo ir neviršytų maksimumo. Tarp šių dviejų pločių dydis keičiasi sklandžiai, o už jų ribų išlaiko artimiausią ribinę reikšmę.
Kodėl rezultatas pateikiamas rem ir vw, o ne pikseliais?
Ribos nustatomos „rem“ vienetais, o kintanti vidurinė dalis išlaiko „rem“ komponentą, todėl tekstas vis tiek didėja, kai skaitytojas priartina vaizdą arba padidina numatytąjį naršyklės šrifto dydį (naudojant tik pikselius arba ekrano srities vienetus tai gali neveikti). Dydžius įvedate pikseliais, nes taip patogiau mąstyti, o įrankis juos paverčia į „rem“ pagal jūsų nurodytą pagrindinį šrifto dydį.
Ar galiu tai naudoti tarpams, o ne tik šrifto dydžiui?
Taip. Ta pati reikšmė tinka vidinėms (padding) ir išorinėms (margin) paraštėms, tarpams (gap), pločiui ar aukščiui – visur, kur naudojami ilgio vienetai. Perjunkite peržiūrą į „Rėmelis“, kad stebėtumėte, kaip auga tarpai, o ne tekstas. Jei jūsų mažiausias ir didžiausias dydžiai sutampa, rezultatas tampa tiesiog fiksuotu dydžiu, nes nėra ko keisti.
Ar visos naršyklės palaiko clamp()?
Taip – visos šiuolaikinės naršyklės palaiko „clamp()“ nuo 2020 metų, todėl galite naudoti šią reikšmę be jokių atsarginių variantų. Esant labai dideliam maksimumui arba staigiam pokyčiui, verta greitai patikrinti su 200% masteliu, ar tekstas vis tiek padidėja skaitytojams, kuriems to reikia.