⭐ 0
🔍
Teksti Kuva PDF & Docs Ääni Musiikki Elektroniikka Aika Apuohjelmat Validaattorit Esoteerinen Pelit

Nestetyyppinen vaakageneraattori

Laske todellinen nestemäinen CSS-clamp()-arvo minimi- ja enimmäiskoosta kahdella näkymän leveydellä, jolloin kaltevuus ja leikkauspisteet näytetään vaiheittain ja koon muutoksen esikatselu.

Käsitellään... 0%

Tulos

Tämä sivu avaa laskimen suoraan tyyppimittakaavassa 16 pikselin pohjalla ja 1,25 (suuri kolmasosa) suhteella jo valittuna – vakaa, laajalti käytetty aloituspiste typografiselle mittakaavalle. Pelkästään näistä kahdesta numerosta luodaan kuusi kokoa: pieni, perus, h4, h3, h2 ja h1, jokaisella on oma fluid clamp() -arvo yhden kiinteän koon sijaan.

Jokainen askel pitää peruskoon ankkuroituna samassa arvossa sekä mobiili- että työpöytäpäässä, kun taas otsikot skaalautuvat aggressiivisemmin leveämmässä työpöytänäkymässä kuin kapeassa mobiilissa – sama ajatus kuin valita hellävaraisempi suhde pienille näytöille ja rohkeampi suurille näytöille, jotka johdetaan automaattisesti valitsemastasi yhdestä kuvasuhteesta.

Suhteen muuttaminen arvoon 1,125, 1,2, 1,333 tai 1,5 luo koko taulukon välittömästi, ja sen alla oleva painike kopioi kaikki kuusi clamp()-arvoa liitettäväksi mukautettujen CSS-ominaisuuksien lohkoksi muilla tyylisivuilla viitteeksi.

🛡️
Suoritetaan selaimessa

Tiedostosi ja syötteesi eivät koskaan poistu tältä laitteelta. Käsittely toimii täysin offline-tilassa. 100 % turvallinen.

Hyväksytyt muodot ja säännöt

  • Todellinen nestetypografinen matematiikka: kaltevuus, vw-kerroin ja y-akselin leikkaus näkyvät eksplisiittisesti, ei vain lopullinen clamp()-viiva.
  • Live esikatselu: vedä näkymän leveyden liukusäädintä nähdäksesi näytetekstin koon muuttuvan täsmälleen samalla tavalla kuin oikean selainikkunan kokoa muutetaan.
  • Tyyppimittakaavatila: peruskoko ja suhde 1,125:stä 1,5:een luovat kuusi fluid clamp() -vaihetta – pieni, pohja, h4, h3, h2, h1 – kopiointivalmiin CSS:ään.

Tärkeimmät edut

✓ Clamp()-viiva, kaltevuus- ja risteysnumerot sekä live-esikatselu päivittyvät kirjoittaessasi – painiketta ei tarvitse painaa.
✓ Näkymän leveyden liukusäädin ohjaa live-esikatseluruutua, joten näet tarkan nesteen skaalauksen toiminnassa minimi- ja enimmäisrajapisteiden välillä, et vain kaavaa.
✓ Erillinen tyyppiasteikkotila muuttaa yhden peruskoon ja -suhteen täydelliseksi 6-vaiheiseksi nesteotsikkoasteikoksi, joka on valmis lohkona mukautettuja CSS-ominaisuuksia.

Käyttötapaukset

  • • Muuta pienin/maksimi fonttikoko ja näkymäalue todelliseksi clamp() -viivaksi – mukaan lukien kaltevuus, vw-kerroin ja leikkauspisteet – sen sijaan, että katsoisit yhtä opetusohjelmasta.
  • • Vedä näkymän leveyden liukusäädintä esikatsellaksesi sujuvaa otsikkoa tai tekstin koon muutosta täsmälleen samalla tavalla kuin oikean selainikkunan kokoa muuttaessa, ennen kuin liität sen tyylitaulukkoon.
  • • Luo täysi 6-vaiheinen nestetyyppiasteikko (pienestä h1:een) yhdestä peruskoosta ja -suhteesta, joka on kopioitu liitettäväksi mukautettujen CSS-ominaisuuksien lohkoksi.
  • • Rakenna fluid clamp() välityksille (marginaali, täyte, aukko) fontin koon sijaan – sama kaltevuus/leikkauskaava pätee kaikkiin CSS-ominaisuuksiin.