CSS Clamp() skaičiuoklė

CSS spaustukas (MIN, PREFERRED, MAX) leidžia viena deklaracija pakeisti visą krūvą medijos užklausų: reikšmė išlieka MIN žemiau mažiausio peržiūros srities, MAX virš didžiausios ir sklandžiai keičiasi. Sunkiausia dalis yra PREFERENCIAMAS terminas – santykinė peržiūros srities išraiška, pvz., 0,833rem + 0,833vw, kurios niekas nenori išvesti ranka. Šis skaičiuotuvas iš tikrųjų apskaičiuoja jį iš keturių skaičių: minimalaus dydžio, didžiausio dydžio ir peržiūros srities pločio, kuriam taikomas kiekvienas iš jų.

Rodomas kiekvienas tarpinis skaičius, o ne tik paskutinė eilutė: nuolydis (kiek dydžio vienetų reikšmė auga vienam peržiūros srities pikseliui), tas pats nuolydis, išreikštas vw koeficientu, ir y ašies sankirta – konstanta, pridėta prie vw termino, kad linija eina tiksliai per du jūsų nurodytus taškus. Kiekvienas, kuris įklijavo clamp() reikšmę iš mokymo programos nesuprasdamas jos, čia gali pamatyti ir patikrinti tikrąją aritmetiką.

Peržiūros srities pločio slankiklis valdo tiesioginės peržiūros laukelį, todėl sklandus mastelio keitimas yra matomas, o ne tik apskaičiuojamas: vilkite jį tarp minimalaus ir didžiausio lūžio taškų ir stebėkite, kaip pavyzdinis tekstas keičiamas tiksliai taip, kaip būtų keičiamas tikrojo naršyklės lango dydis. Išvesties eilutė ir suskirstymo atnaujinimas kiekvieną kartą paspaudus klavišą – tai natūraliai susiejama su keitikliu px į rem, kai reikia konvertuoti ir patį pagrindinio šrifto dydį.

Perjunkite į tipo mastelio režimą, kad sukurtumėte visą skystosios tipografijos sistemą vienu žingsniu: įveskite pagrindinį dydį ir modulinį santykį (1,125–1,5) ir gaukite šešis dydžius – mažas, bazinis, h4, h3, h2 ir h1 – kiekvienas apskaičiuojamas kaip atskira spaustuko () linija tarp švelnesnio mobiliojo progreso ir viso darbalaukio santykio, paruošto kopijuoti kaip pasirinktinį CSS bloką.