⭐ 0
🔍
Szöveg Kép PDF és Dokumentumok Hang Zene Elektronika Idő Segédprogramok Validátorok Ezotéria Játékok

Folyadéktávolságú bilincs() generátor

Számítson ki egy valós folyékony CSS clamp() értéket a minimális és maximális méretből két nézetablak szélességében, a lejtőn és a metszésponton lépésről lépésre, valamint élő átméretezési előnézettel.

Feldolgozás... 0%

Eredmény

A CSS clamp() pontosan ugyanúgy működik a térközöknél, mint a betűméretnél – a tulajdonság történetesen margó, padding vagy rés a betűméret helyett. Ez az oldal megnyitja a számológépet 8 képpont és 32 képpont közötti tartományban egy 320 és 1280 képpont közötti nézetablakban. Ez egy gyakori lépés a szakaszok kitöltéséhez vagy a kártyarésekhez, amelyek szűknek tűnnek a telefonon, és tágasak az asztalon anélkül, hogy médialekérdezés lenne látható.

A mögöttes matematika nem foglalkozik azzal, hogy a számok mit jelentenek: ugyanaz a meredekség és y tengely metszéspontja képlet, amely folyékony fejlécméretet hoz létre, folyékony térközértéket eredményez, így az alábbi bontás pontosan megmutatja, hogy a 8px és 32px hogyan válik másolásra kész clamp() sorrá a kitöltéshez: clamp(...).

Húzza el a nézetablak szélessége csúszkát, hogy megtekinthesse a térközt a két töréspont közötti tetszőleges szélességben, állítsa be a minimális és maximális értékeket egy szűkebb vagy lazább tartományhoz, és másolja a kész sort egyenesen arra a térköztulajdonságra, amelyre szüksége van.

🛡️
Böngészőben futtatva

A fájljaid és bemeneteid soha nem hagyják el ezt az eszközt. A feldolgozás teljesen offline módon történik. 100% biztonságos.

Elfogadott formátumok és szabályok

  • Valódi folyadéktipográfiai matematika: a meredekség, a vw együttható és az y-tengely metszéspontja kifejezetten látható, nem csak a végső clamp() vonal.
  • Élő előnézet: húzza el a nézetablak szélessége csúszkát, ha meg szeretné tekinteni, hogy a minta szövege pontosan úgy történik, ahogyan egy valódi böngészőablak átméretezése történik.
  • Típusméretű mód: az alapméret és az 1,125 és 1,5 közötti arány hat fluid clamp() lépést generál – kicsi, alap, h4, h3, h2, h1 – másolásra kész CSS-ként.

Főbb előnyök

✓ A clamp() vonal, a lejtő- és metszéspontszámok, valamint az élő előnézet mind gépelés közben frissül – nincs gombnyomás.
✓ A nézetablak szélességét mutató csúszka egy élő előnézeti mezőt hajt meg, így a minimális és maximális töréspontok közötti pontos áramlási skálázást láthatja, nem csak egy képletet.
✓ Egy külön típusskála mód egy alapméretet és arányt egy teljes, 6 lépcsős folyadékfejléc-skálává alakít, amely készen áll az egyéni CSS-tulajdonságok blokkjára.

Felhasználási területek

  • • Változtassa meg a minimális/maximális betűméretet és a nézetablak-tartományt valódi clamp() vonallá – a lejtőt, a vw-együtthatót és a metszéspontot is beleértve – ahelyett, hogy egy oktatóanyagból szemezgetne.
  • • Húzza el a nézetablak szélességét mutató csúszkát, hogy megtekinthesse a gördülékeny fejléc vagy törzsméret átméretezését, pontosan úgy, ahogyan egy valódi böngészőablak átméretezése közben történik, mielőtt stíluslapon rögzítené.
  • • Hozzon létre egy teljes, hatlépcsős folyadéktípus-skálát (kistől h1-ig) egyetlen alapméretből és arányból, amelyet az egyéni CSS-tulajdonságok beillesztésre kész blokkjaként másol.
  • • Hozzon létre egy fluid clamp()-t a térközhöz (margó, kitöltés, hézag) a betűméret helyett – ugyanaz a lejtő/metszésképlet vonatkozik minden CSS-tulajdonságra.