⭐ 0
🔍
Tekstas Vaizdas PDF ir dokumentai Garsas Muzika Elektronika Laikas Komunalinės paslaugos Validatoriai Ezoterinis Žaidimai

CSS Clamp() Skaičiuoklė

Apskaičiuokite tikrą sklandžią CSS clamp() reikšmę pagal mažiausią ir didžiausią dydį dviejuose peržiūros srities pločiuose, žingsnis po žingsnio rodant nuolydį ir susikirtimo su ašimi tašką bei pateikiant tiesioginę dydžio keitimo peržiūrą.

🔒 Visiškai apdorojama jūsų naršyklėje – niekas, kurį čia įvedėte, niekada neįkeliama.

Apdorojama... 0%

Rezultatas

CSS clamp(MIN, PREFERRED, MAX) leidžia viena deklaracija pakeisti visą krūvą media queries: reikšmė išlieka MIN mažesnėje peržiūros srityje, MAX – didesnėje, o tarp jų keičiasi tolygiai. Sunkiausia dalis yra PREFERRED narys – nuo peržiūros srities priklausanti išraiška, pvz., 0.833rem + 0.833vw – kurios niekas nenori išvedinėti ranka. Ši skaičiuoklė ją apskaičiuoja tiksliai iš keturių skaičių: mažiausio dydžio, didžiausio dydžio ir peržiūros srities pločio, kuriame kiekvienas iš jų taikomas.

Rodomas kiekvienas tarpinis skaičius, o ne tik galutinė eilutė: nuolydis (kiek dydžio vienetų reikšmė padidėja vienam peržiūros srities pikseliui), tas pats nuolydis, išreikštas kaip vw koeficientas, ir susikirtimas su y ašimi – konstanta, pridedama prie vw nario, kad tiesė eitų tiksliai per du jūsų nurodytus taškus. Kiekvienas, kuris yra įkėlęs clamp() reikšmę iš pamokos jos nesuprasdamas, č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čiuotas: vilkite jį tarp mažiausio ir didžiausio lūžio taškų ir stebėkite, kaip pavyzdinis tekstas keičia dydį lygiai taip, kaip keistųsi keičiant tikro naršyklės lango dydį. Galutinė eilutė ir išskaidymas atsinaujina su kiekvienu klavišo paspaudimu – tai natūraliai dera su px į rem konverteriu, kai reikia konvertuoti ir patį bazinį šrifto dydį.

Pereikite į šrifto dydžių skalės režimą, kad vienu žingsniu gautumėte pilną sklandžios tipografijos sistemą: įveskite bazinį dydį ir modulinį santykį (nuo 1,125 iki 1,5) ir gaukite šešis dydžius – small, base, h4, h3, h2 ir h1 – kiekvienas apskaičiuotas kaip atskira clamp() eilutė tarp švelnesnės mobiliosios progresijos ir pilno stalinio kompiuterio santykio, paruošta kopijuoti kaip CSS pasirinktinių savybių blokas.

Patinka šis įrankis? Manote, kad šis produktas naudingas? Matote jame potencialo ir norite paremti?

🛡️
Vykdoma naršyklėje

Jūsų bylos ir įvestys niekada nepalieka šio įrenginio. Apdorojimas vyksta visiškai atsijungus. 100 % saugu.

Priimtini formatai ir taisyklės

  • Tikra sklandžios tipografijos matematika: aiškiai rodomi nuolydis, vw koeficientas ir susikirtimas su y ašimi, o ne tik galutinė clamp() eilutė.
  • Tiesioginė peržiūra: vilkite peržiūros srities pločio slankiklį ir stebėkite, kaip pavyzdinis tekstas keičia dydį lygiai taip, kaip keistųsi keičiant tikro naršyklės lango dydį.
  • Šrifto dydžių skalės režimas: iš bazinio dydžio ir santykio nuo 1,125 iki 1,5 sugeneruojami šeši sklandūs clamp() žingsniai – small, base, h4, h3, h2, h1 – paruošti kopijuoti kaip CSS.

Pagrindiniai privalumai

✓ clamp() eilutė, nuolydžio ir susikirtimo su ašimi reikšmės bei tiesioginė peržiūra atsinaujina iš karto rašant – jokio mygtuko spausti nereikia.
✓ Peržiūros laukelis valdomas slankikliu, atitinkančiu peržiūros srities plotį, todėl matote tikrą sklandų mastelio keitimą tarp mažiausio ir didžiausio lūžio taškų, o ne vien formulę.
✓ Atskiras šrifto dydžių skalės režimas iš vieno bazinio dydžio ir santykio sukuria pilną 6 pakopų sklandžią antraščių skalę, pateikiamą kaip CSS pasirinktinių savybių blokas.

Naudojimo atvejai

  • • Paverskite min./maks. šrifto dydį ir peržiūros lango diapazoną į tikrą clamp() eilutę – su nuolydžiu, vw koeficientu ir sankirtos tašku. Pamirškite aklą kopijavimą iš instrukcijų.
  • • Vilkite peržiūros lango pločio slankiklį ir stebėkite, kaip prisitaikančios antraštės ar teksto dydis kinta lygiai taip, kaip keistųsi naršyklės lango dydį – dar prieš įrašant į stilių lentelę.
  • • Sukurkite visą 6 lygių prisitaikančią šriftų skalę (nuo smulkaus iki h1) iš vieno bazinio dydžio ir proporcijos. Nukopijuosite kaip paruoštą CSS pasirinktinių savybių bloką.
  • • Kurkite prisitaikantį clamp() tarpams (margin, padding, gap), o ne šrifto dydžiui – ta pati nuolydžio ir sankirtos formulė tinka bet kuriai CSS savybei.