⭐ 0
🔍
Tekst Pilt PDF ja dokumendid Heli Muusika Elektroonika Aeg Kommunaalteenused Validaatorid Esoteeriline Mängud

Vedeliku vaheklambri() generaator

Arvutage tegelik voolav CSS clamp() väärtus minimaalse ja maksimaalse suuruse põhjal kahe vaateava laiuse lõikes, kus kallet ja ristmikku näidatakse samm-sammult ning reaalajas suuruse muutmise eelvaade.

Töötlemine... 0%

Tulemus

CSS clamp() töötab tühikute puhul täpselt samamoodi kui fondi suuruse puhul – fondi suuruse asemel on lihtsalt veeris, polster või tühik. See leht avab kalkulaatori vahemikuga 8 kuni 32 pikslit 320 kuni 1280 piksli vaateaknas, mis on tavaline samm sektsioonide polsterdamiseks või kaardivahede jaoks, mis peaksid tunduma telefonis kitsad ja töölaual ruumikad, ilma et meediumipäringut oleks näha.

Aluseks olev matemaatika ei hooli sellest, mida numbrid tähistavad: sama kalde ja y-telje ristumiskoha valem, mis loob vedela päise suuruse, annab vedeliku vahe väärtuse, nii et allolev jaotus näitab täpselt, kuidas 8px ja 32px muutuvad polsterdamiseks kopeerimisvalmis clamp() reaks: clamp(...).

Lohistage vaateava laiuse liugurit, et näha eelvaateid, kuidas vahekaugus kahe murdepunkti mis tahes laiuse korral mõjuks, reguleerige minimaalset ja maksimaalset väärtust kitsama või lõdvema vahemiku jaoks ning kopeerige valmis rida otse mis tahes vaheomadusse.

🛡️
Teostatud brauseris

Teie failid ja sisendid ei lahku sellest seadmest kunagi. Töötlemine toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud vormingud ja reeglid

  • Tõeline vedeliku tüpograafia matemaatika: kalle, vw koefitsient ja y-telje lõikepunkt on selgelt näidatud, mitte ainult viimane clamp() joon.
  • Reaalajas eelvaade: lohistage vaateava laiuse liugurit, et vaadata näidisteksti suurust täpselt nii, nagu see muutuks tegeliku brauseriakna suuruse muutmisel.
  • Tüübimõõtkava režiim: baassuurus ja suhe 1,125–1,5 genereerivad kuus vedelikuklambri() sammu – väike, alus, h4, h3, h2, h1 – koopiavalmis CSS-ina.

Peamised eelised

✓ Clamp() joon, kalde ja ristmike numbrid ning reaalajas eelvaade värskendatakse sisestamise ajal – nuppu pole vaja vajutada.
✓ Vaateava laiuse liugur käivitab reaalajas eelvaatekasti, nii et näete täpset vedeliku skaleerimist minimaalse ja maksimaalse murdepunkti vahel, mitte ainult valemit.
✓ Eraldi tüübiskaala režiim muudab ühe baassuuruse ja suhte täielikuks 6-astmeliseks vedeliku pealkirja skaalaks, mis on valmis CSS-i kohandatud atribuutide plokina.

Kasutusjuhtumid

  • • Muutke minimaalne/maksimaalne fondisuurus ja vaateava vahemik tõeliseks clamp()-jooneks – kaasa arvatud kalle, vw koefitsient ja ristmik – selle asemel, et õpetusest ühele silma heita.
  • • Lohistage vaateava laiuse liugurit, et vaadata sujuva pealkirja või keha suuruse muutmise eelvaadet täpselt nii, nagu see toimuks tegeliku brauseriakna suuruse muutmisel, enne kui lisate selle stiilitabelile.
  • • Looge ühest baassuurusest ja suhtarvust täielik 6-astmeline vedelikutüübi skaala (väike kuni h1), mis on kopeeritud CSS-i kohandatud atribuutide kleepimisvalmis plokina.
  • • Ehitage fondi suuruse asemel vahede (veeris, polster, vahe) jaoks vedel clamp() – sama kalde/ristmiku valem kehtib iga CSS-i atribuudi kohta.