Mitä muunnin laskee puolestasi
Työkalu muuntaa pikseliarvot (px) rem- ja em-yksiköiksi – ja myös toiseen suuntaan. Syötät arvon johonkin kolmesta yksikkökentästä, ja kaksi muuta lasketaan ja näytetään automaattisesti. Käyttöliittymässä tästä muistuttaa ohje: "Syötä px-, rem- tai em-arvo – kaksi muuta päivittyvät kirjoittaessasi." Pelkän muunnoksen lisäksi voit asettaa juuren fonttikoon ja em-kontekstin fonttikoon itse, jotta tulokset vastaavat omaa suunnitteluasi eivätkä yleistä oletusarvoa.
px, rem ja em – mitä kukin kenttä tarkoittaa
Muuntimessa on kolme kenttää. "Juuren fonttikoko (px)" sisältää perusfonttikoon pikseleinä, johon kaikki rem-arvot suhteutetaan. "em-kontekstin fonttikoko (px)" sisältää sen elementin fonttikoon pikseleinä, jolle lasket em-arvoa. "Arvot" on kenttä, johon kirjoitat itse muunnettavan pituuden – pikseleinä, remeinä tai emeinä. Ennen kuin muutat mitään, 16 pikseliä, 1 rem ja 1 em vastaavat toisiaan. Tästä lähtökohdasta työkalu lähtee liikkeelle, kunnes säädät arvoja itse.
Juuren ja em-kontekstin koon asettaminen
"Juuren fonttikoko (px)" -kenttä vaatii luvun, joka on suurempi kuin 0, ja se on oletuksena 16px. Tämä arvo on kaikkien rem-muunnosten perusta: jos projektisi todellinen juuren fonttikoko poikkeaa oletuksesta, kentän säätäminen varmistaa, että näytetyt rem-arvot vastaavat suunnitteluasi. Jos kenttään syöttää virheellisen arvon, näkyviin tulee viesti "Juuren fonttikoon (root) on oltava lukuarvo, joka on suurempi kuin 0."
"em-kontekstin fonttikoko (px)" -kenttä toimii samalla periaatteella – luku, joka on suurempi kuin 0, oletuksena myös 16px – mutta sillä on eri tarkoitus. Koska em-arvo suhteutuu sen elementin omaan fonttikokoon, joka ei välttämättä ole sama kuin sivun juuren fonttikoko, työkalu kysyy tämän koon erikseen. Käytä kenttää silloin, kun lasket em-arvoa tietylle elementille etkä koko sivulle. Jos syöte on virheellinen, näkyviin tulee "em-kontekstin fonttikoon on oltava lukuarvo, joka on suurempi kuin 0."
Arvojen syöttäminen ja muunnoksen seuraaminen reaaliajassa
"Arvot"-osiossa jokaisella kolmesta yksiköstä on oma kenttänsä. Kun muokkaat yhtä niistä – px, rem tai em –, kaksi muuta lasketaan uudelleen kirjoittaessasi, nykyisten juuren ja kontekstin fonttikokojen perusteella. Jos pidät molemmat oletusarvossa 16px ja kirjoitat px-kenttään 24, rem-kenttä näyttää 1,5rem ja em-kenttä 1,5em, koska 24 jaettuna 16:lla on 1,5.
Negatiiviset pikseliarvot ovat sallittuja: arvo kuten -8px muunnetaan samalla tavalla kuin positiivinen, ja oletusasetuksilla tulokseksi tulee -0,5rem ja -0,5em. Jos "Arvot"-kenttä ei tunnista kelvollista lukua, työkalu näyttää viestin "Syötä luku muunnettavaksi."
Kun muutat sen jälkeen juuren tai kontekstin fonttikokoa, myös jo syötetty arvo päivittyy. Jos px-kentässä on 40 ja juuren fonttikoko on 16px, rem-kenttä näyttää 2,5rem. Jos nostat juuren fonttikoon 20px:ään muuttamatta px-arvoa, rem-kenttä näyttää 2rem – rem-tulos seuraa sillä hetkellä asetettua juuren fonttikokoa, ei pelkkää syötettyä pikselilukua.
Taulukon "Yleisimmät px → rem (16px perusarvo)" lukeminen
Syöttökenttien alapuolella työkalu näyttää taulukon "Yleisimmät px → rem (16px perusarvo)" – yleisiä pikseliarvoja muunnettuna remeiksi, kiinteästi 16 pikselin juuren fonttikoon pohjalta. Siitä näet esimerkiksi, että 8px vastaa 0,5rem, 24px vastaa 1,5rem ja 48px vastaa 3rem, ilman että syötät jokaista arvoa erikseen muunnoskenttiin. Tämä taulukko pysyy sidottuna 16px-perusarvoon ja toimii kiinteänä vertailukohtana yllä olevan reaaliaikaisen muunnoksen rinnalla, jota voit käyttää toisenlaisella juuren fonttikoolla.
Missä syötteesi käsitellään
Jokainen muunnos tapahtuu selaimessasi. Mitään kirjoittamiasi tietoja ei lähetetä BroBroGo-palveluun.
Kenelle tämä muunnin sopii
Se sopii kaikille, jotka tarvitsevat kiinteiden pikseliarvojen muuntamista suhteellisiksi rem- tai em-yksiköiksi responsiivista suunnittelua varten, ja niille, jotka haluavat ymmärtää, miten eri juuren fonttikoot vaikuttavat rem-arvoihin. Se sopii myös silloin, kun lasket em-arvoa, joka riippuu tietyn elementin fonttikoosta. Muunnin on hyödyllinen myös silloin, kun haluat varmistaa, että mitoituksesi skaalautuu halutulla tavalla, jos lukija muuttaa selaimensa oletusfonttikokoa.
Usein kysytyt kysymykset
Millä juuren fonttikoolla kannattaa aloittaa? Työkalu käynnistyy 16px-arvolla, jolloin alussa 16px, 1rem ja 1em vastaavat toisiaan. Jos projektisi käyttää toista juuren fonttikokoa, säädä "Juuren fonttikoko (px)" -kenttää vastaavasti, ja jokainen rem-arvo päivittyy heti.
Pitääkö em-kontekstin koko täyttää, jos käytän vain remiä? em-kontekstin fonttikoon kenttä vaikuttaa vain näytettyyn em-arvoon, koska em mitataan tietyn elementin fonttikoon mukaan, ei juuren koon mukaan. Jos käytät pelkästään remiä, voit jättää sen oletusarvoon 16px ja keskittyä juuren fonttikokoon.
Voiko negatiivisia pikseliarvoja muuntaa? Kyllä. Työkalu hyväksyy negatiiviset pikseliarvot ja muuntaa ne samalla tavalla kuin positiiviset.
Mitä tapahtuu, jos kirjoitan kirjaimia tai jätän kentän tyhjäksi? Jokainen kenttä tarkistetaan erikseen. Virheellinen syöte "Arvot"-kentässä näyttää viestin "Syötä luku muunnettavaksi.", virheellinen juuren fonttikoko näyttää viestin "Juuren fonttikoon (root) on oltava lukuarvo, joka on suurempi kuin 0.", ja virheellinen em-kontekstin fonttikoko näyttää viestin "em-kontekstin fonttikoon on oltava lukuarvo, joka on suurempi kuin 0."
Lähetetäänkö syöttämäni tiedot minnekään? Ei. Jokainen muunnos tapahtuu selaimessasi, eikä mitään kirjoittamaasi lähetetä BroBroGo-palveluun.