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

16-24 pikseliä Fluid Font Koko

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

Fonttikoon skaalaaminen sujuvasti 16 pikselistä 24 pikseliin on yksi yleisimmistä kysymyksistä CSS clamp() -hauissa, koska 16 kuvapistettä on lähes universaali leipätekstin oletusarvo ja 24 pikseliä on usein nouseva hieman suurempi otsikko tai pääkappale. Tämä sivu avaa laskimen täsmälleen sillä parilla, joka on esitäytetty 320–1280 pikselin näkymäaluetta vasten, joten clamp()-rivi on valmis heti, kun se latautuu.

Jos tarvitset vain staattisen rem- tai em-vastaavan 16px tai 24px – ilman näyttöporttiin perustuvaa skaalausta – px to rem -muunnin vastaa siihen yhdessä vaiheessa. Tämä laskin on tarkoitettu tapauksiin, joissa itse arvon pitäisi muuttua tasaisesti selainikkunan koon muuttuessa sen sijaan, että se pysyisi kiinteänä yhdessä rem-arvossa.

Alla oleva erittely näyttää tarkalleen, kuinka 16 ja 24 pikseliä muuttuvat kaltevuudeksi, vw-kertoimeksi ja y-akselin leikkauspisteeksi, ja live-esikatselun liukusäätimellä voit vetää läpi 320–1280 kuvapisteen alueen ja seurata tekstin kasvavaa koosta toiseen reaaliajassa ennen kuin kopioit CSS-rivin tyylitaulukkoon.

🛡️
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.