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

Skysčio tipo skalių generatorius

Apskaičiuokite tikrąją skystą CSS clamp() vertę pagal minimalų ir maksimalų dydį per du peržiūros srities pločius, nuolydis ir sankirta rodomi žingsnis po žingsnio ir tiesioginė dydžio keitimo peržiūra.

Apdorojama... 0%

Rezultatas

Šis puslapis atidaro skaičiuotuvą tiesiogiai šrifto mastelio režimu, kai jau pasirinktas 16 pikselių pagrindas ir 1,25 (didžioji trečdalis) – tvirtas, plačiai naudojamas tipografinės skalės pradžios taškas. Vien iš tų dviejų skaičių generuojami šeši dydžiai: mažas, bazinis, h4, h3, h2 ir h1, kiekvienas turi savo skysčio gnybto () reikšmę, o ne vieną fiksuotą dydį.

Kiekviename žingsnyje bazinis dydis išlaikomas ta pačia verte tiek mobiliajame, tiek staliniame kompiuteryje, o platesnėje darbalaukio peržiūros srityje antraštės didėja agresyviau nei siaurame mobiliajame – tokia pati idėja, kaip pasirinkti švelnesnį santykį mažiems ekranams ir drąsesnį dideliems ekranams, automatiškai gaunamus iš vieno pasirinkto koeficiento.

Santykį pakeitus į 1,125, 1,2, 1,333 arba 1,5, visa lentelė akimirksniu atkuriama, o apačioje esantis mygtukas nukopijuoja visas šešias clamp() reikšmes kaip paruoštą įklijuoti CSS tinkintų ypatybių bloką, skirtą likusiai stiliaus lapo daliai nuorodai.

🛡️
Vykdoma naršyklėje

Jūsų failai ir įvestis niekada nepalieka šio įrenginio. Apdorojimas vykdomas visiškai neprisijungus. 100% saugus.

Priimami formatai ir taisyklės

  • Tikra skysčių tipografijos matematika: nuolydis, vw koeficientas ir y ašies sankirta rodoma aiškiai, o ne tik galutinė clamp() linija.
  • Tiesioginė peržiūra: vilkite peržiūros srities pločio slankiklį, kad pamatytumėte, kaip pavyzdinis teksto dydis keičiamas tiksliai taip, kaip būtų keičiamas tikrojo naršyklės lango dydis.
  • Tipo mastelio režimas: bazinis dydis ir santykis nuo 1,125 iki 1,5 sukuria šešis skysčio spaustuko () žingsnius – mažas, bazinis, h4, h3, h2, h1 – kaip kopijavimui paruoštą CSS.

Pagrindiniai privalumai

✓ Clamp() linija, nuolydžio ir sankryžos numeriai bei tiesioginė peržiūra atnaujinami vedant tekstą – nereikia spausti mygtuko.
✓ Peržiūros srities pločio slankiklis valdo tiesioginės peržiūros laukelį, todėl matote tikslų skysčio mastelį veikiant tarp min. ir maks. lūžio taškų, o ne tik formulę.
✓ Atskiras tipo skalės režimas vieną bazinį dydį ir santykį paverčia visa 6 pakopų skysčio antraštės skale, paruošta kaip tinkintų CSS ypatybių blokas.

Naudojimo atvejai

  • • Paverskite minimalų / maksimalų šrifto dydį ir peržiūros srities diapazoną į tikrą clamp() liniją (įskaitant nuolydį, VW koeficientą ir sankirtą), o ne žvelgdami į vieną iš mokymo programos.
  • • Vilkite peržiūros srities pločio slankiklį, kad peržiūrėtumėte sklandžią antraštę arba kūno dydžio keitimą tiksliai taip, kaip būtų keičiamas tikrojo naršyklės lango dydis, prieš įtraukdami jį į stiliaus lapą.
  • • Sugeneruokite visą 6 pakopų skysčio tipo skalę (nuo mažos iki h1) iš vieno bazinio dydžio ir santykio, nukopijuotą kaip paruoštą įklijuoti CSS tinkintų ypatybių bloką.
  • • Vietoj šrifto dydžio sukurkite skystą spaustuką () tarpams (paraštė, užpildymas, tarpas) – ta pati nuolydžio / sankirtos formulė taikoma bet kuriai CSS ypatybei.