Hva konverteringen gjør
Verktøyet regner om pikselverdier (px) til rot-em (rem) og em, og omvendt. Du kan skrive inn en verdi i hvilket som helst av de tre feltene, og de to andre oppdateres automatisk med riktig verdi. I tillegg kan du selv sette rot-skriftstørrelsen og en egen em-kontekst-skriftstørrelse, slik at omregningen stemmer med akkurat den situasjonen du jobber med, i stedet for å basere seg på en fast antakelse.
Dette gjør verktøyet nyttig når du skal gjøre om faste pikselmål til relative enheter i et CSS-oppsett, når du vil forstå hvordan en endret rot-skriftstørrelse slår ut på rem-verdiene dine, eller når du trenger å regne ut em ut fra skriftstørrelsen til et bestemt element. Det passer også når du vil sjekke at størrelsene dine fortsatt skalerer riktig hvis en leser endrer standard skriftstørrelse i egen nettleser.
Px, rem og em – de tre enhetene
De tre feltene i verktøyet representerer tre ulike måter å angi en lengde på. Px er en pikselverdi og står for seg selv i omregningen. Rem regnes ut fra rot-skriftstørrelsen du har satt i feltet Rot-skriftstørrelse (px). Em regnes ut fra den separate skriftstørrelsen du har satt i feltet em-kontekst skriftstørrelse (px), altså skriftstørrelsen til det spesifikke elementet verdien gjelder for. Fordi rem og em begge er relative enheter, endrer verktøyet automatisk verdiene deres når du justerer rot- eller kontekstfeltet, mens px-verdien holder seg konstant.
Ved oppstart er begge disse feltene satt til 16px som standard, og da er 16px, 1rem og 1em like store. Endrer du et av feltene, endrer du dermed også forholdet mellom enhetene.
Rot-skriftstørrelsen og hvordan den påvirker rem
Feltet Rot-skriftstørrelse (px) bestemmer hva rem-verdiene dine faktisk tilsvarer i piksler. Standardverdien er 16px, men du kan endre den til hva du vil, så lenge tallet er større enn 0. Endrer du rot-skriftstørrelsen, oppdateres rem-verdiene i de andre feltene umiddelbart.
Med standardverdien på 16px tilsvarer for eksempel 24px 1,5rem. Setter du i stedet rot-skriftstørrelsen til 20px, blir de samme 24 pikslene 1,2rem. På den måten kan du se direkte hvor mye rot-skriftstørrelsen har å si for hvordan rem-verdiene dine oversettes til piksler i et gitt design.
em-kontekst: skriftstørrelsen til elementet selv
Em-verdier regnes ikke ut fra siden som helhet, men ut fra skriftstørrelsen til det elementet de befinner seg i. Derfor har verktøyet et eget felt, em-kontekst skriftstørrelse (px), der du setter denne skriftstørrelsen separat fra rot-skriftstørrelsen. Standardverdien er også her 16px, og feltet krever et tall større enn 0.
Om du for eksempel setter em-konteksten til 20px, tilsvarer 30px 1,5em. Dette gjør det mulig å regne ut riktige em-verdier for et element som har en annen skriftstørrelse enn resten av siden, i stedet for å anta at det følger rot-skriftstørrelsen.
Inndata, utdata og feilmeldinger
Feltet Verdier er der du skriver inn selve lengden du vil konvertere, i px, rem eller em. Verktøyet forklarer dette direkte i grensesnittet: «Skriv inn en verdi i px, rem eller em — de to andre oppdateres mens du skriver.» Endrer du et av de tre feltene, oppdateres de to andre mens du skriver, og resultatet vises som konvertert på tvers av alle tre enheter.
Du kan skrive inn negative pikselverdier, og de regnes om på samme måte som positive verdier. Under omregningen finner du også en tabell merket Vanlige px → rem (16px base), som viser vanlige pikselverdier omregnet til rem med utgangspunkt i en 16px rot-skriftstørrelse, uavhengig av hva du selv har satt i feltet for rot-skriftstørrelse.
Hvis du skriver inn noe som ikke er et gyldig tall i feltet Verdier, vises feilmeldingen «Skriv inn et tall for å konvertere.» Er verdien i Rot-skriftstørrelse (px) ugyldig, vises «Rot-skriftstørrelsen må være et tall større enn 0.» Og er verdien i em-kontekst skriftstørrelse (px) ugyldig, vises «Skriftstørrelsen for em-kontekst må være et tall større enn 0.»
Personvern og hvem verktøyet passer for
Hver konvertering kjøres i nettleseren din. Ingenting du skriver inn, lastes opp til BroBroGo.
Verktøyet passer for deg som skal gjøre om faste pikselverdier til relative rem- eller em-enheter i et responsivt design, som vil se hvordan ulike rot-skriftstørrelser påvirker rem-verdiene dine, som trenger å regne ut em basert på skriftstørrelsen til et bestemt element, eller som vil sikre at størrelsene dine fortsatt skalerer riktig når en leser endrer sin egen standard skriftstørrelse.
Ofte stilte spørsmål
Hva er forskjellen på px, rem og em? px er en fast lengde. rem måles opp mot sidens rot-skriftstørrelse, så ved en 16px-rot er 1rem lik 16px. em måles opp mot skriftstørrelsen til elementet den befinner seg i. Ved å angi skriftstørrelse og avstander i rem, vil alt skalere når en bruker endrer standard skriftstørrelse i nettleseren.
Hvorfor er det en egen størrelse for em-kontekst? em måles i forhold til skriftstørrelsen på sitt eget element, som ikke alltid er roten. Sett em-konteksten til det elementets skriftstørrelse for å beregne em riktig, og la den være lik roten når de to samsvarer.
Hva om min rot-skriftstørrelse ikke er 16px? Endre feltet for rot-skriftstørrelse slik at det matcher din CSS, så oppdateres alle rem-verdier umiddelbart. Tabellen nedenfor er en praktisk guide for en standard 16px-rot som de fleste nettsteder tar utgangspunkt i.