⭐ 0
🔍
Text Obrázok PDF a Dokumenty Audio Hudba Elektronika Čas Užitočné programy Validátory Ezoterika Hry

CSS Clamp() kalkulačka

Vypočítajte skutočnú fluidnú hodnotu CSS clamp() z minimálnej a maximálnej veľkosti cez dve šírky výrezu, pričom krok za krokom sa zobrazí sklon a priesečník a ukážka zmeny veľkosti v reálnom čase.

Spracovanie... 0%

Výsledok

CSS svorka (MIN, PREFEROVANÁ, MAX) umožňuje, aby jedna deklarácia nahradila celý zásobník mediálnych dopytov: hodnota zostáva na MIN pod najmenšou oblasťou zobrazenia, na MAX nad najväčšou a medzi nimi sa plynulo mení. Najťažšou časťou je PREFEROVANÝ termín – výraz relatívny k výrezu, ako napríklad 0,833rem + 0,833vw – ktorý nikto nechce odvodiť ručne. Táto kalkulačka to reálne vypočíta zo štyroch čísel: minimálna veľkosť, maximálna veľkosť a šírka výrezu, pre ktorú platí každé z nich.

Zobrazuje sa každé medzičíslo, nielen posledná čiara: sklon (koľko veľkostných jednotiek narastá hodnota na pixel výrezu), rovnaký sklon vyjadrený ako koeficient vw a priesečník osi y – konštanta pridaná k členu vw, takže čiara prechádza presne cez dva body, ktoré ste zadali. Každý, kto prilepil hodnotu clamp() z tutoriálu bez toho, aby jej porozumel, tu môže vidieť a skontrolovať skutočnú aritmetiku.

Posúvač šírky výrezu ovláda pole živého náhľadu, takže plynulé škálovanie je viditeľné, nielen vypočítané: presuňte ho medzi minimálny a maximálny bod prerušenia a sledujte, ako sa vzorový text zmení presne tak, ako by sa zmenila veľkosť skutočného okna prehliadača. Výstupný riadok a členenie sa aktualizujú pri každom stlačení klávesu – toto sa prirodzene spáruje s prevodníkom px na rem, keď je potrebné previesť aj samotnú základnú veľkosť písma.

Prepnite sa do režimu typovej stupnice pre kompletný systém tekutej typografie v jednom kroku: zadajte základnú veľkosť a modulárny pomer (1,125 až 1,5) a získajte šesť veľkostí – malá, základná, h4, h3, h2 a h1 – každá vypočítaná ako vlastná svorka () medzi jemnejším postupom pre mobilné zariadenia a úplným pomerom pracovnej plochy, pripravená na kopírovanie ako blok vlastných vlastností CSS.

🛡️
Spustené v prehliadači

Vaše súbory a vstupy nikdy neopustia toto zariadenie. Spracovanie prebieha úplne offline. 100% bezpečné.

Prijaté formáty a pravidlá

  • Skutočná kvapalinová typografická matematika: explicitne zobrazený sklon, koeficient vw a priesečník osi y, nielen konečná čiara svorky ().
  • Živý náhľad: potiahnite posúvač šírky výrezu a sledujte, ako sa vzorový text mení presne tak, ako by sa zmenila veľkosť skutočného okna prehliadača.
  • Režim typovej stupnice: základná veľkosť a pomer od 1,125 do 1,5 generuje šesť krokov fluidnej svorky () – malý, základný, h4, h3, h2, h1 – ako CSS pripravené na kopírovanie.

Hlavné výhody

✓ Čiara svorky (), čísla sklonu a priesečníkov a živý náhľad sa aktualizujú počas písania – nie je potrebné stlačiť žiadne tlačidlo.
✓ Posúvač šírky výrezu ovláda pole živého náhľadu, takže medzi minimálnymi a maximálnymi bodmi prerušenia uvidíte presné škálovanie tekutiny v akcii, nielen vzorec.
✓ Samostatný režim typovej mierky premení jednu základnú veľkosť a pomer na plnú 6-krokovú stupnicu plynulého nadpisu, ktorá je pripravená ako blok vlastných vlastností CSS.

Prípady použitia

  • • Premeňte minimálnu/maximálnu veľkosť písma a rozsah výrezu na skutočnú svorku () – vrátane sklonu, koeficientu vw a priesečníka – namiesto toho, aby ste sa pozerali na jednu z návodu.
  • • Potiahnutím posúvača šírky výrezu zobrazíte ukážku zmeny veľkosti nadpisu alebo telesa presne tak, ako by sa zmenila veľkosť skutočného okna prehliadača, a to pred jeho odovzdaním do šablóny so štýlmi.
  • • Vygenerujte plnú 6-krokovú stupnicu typu tekutiny (malá až po h1) z jednej základnej veľkosti a pomeru, ktorú skopírujete ako blok vlastných vlastností CSS pripravený na prilepenie.
  • • Namiesto veľkosti písma vytvorte tekutinovú svorku () pre rozstupy (okraj, výplň, medzera) – rovnaký vzorec sklonu/priesečníka platí pre akúkoľvek vlastnosť CSS.