Hvad konverteren gør
Dette værktøj konverterer pixelværdier (px) til rem og em – og omvendt. Du indtaster en værdi i et af de tre felter, og værktøjet beregner og viser automatisk de tilsvarende værdier i de to andre. Ud over selve konverteringen kan du angive en brugerdefineret root-skriftstørrelse og en em-kontekst-skriftstørrelse, så tallene du får, passer til, hvordan dit eget design faktisk er sat op, i stedet for at gå ud fra en generisk standardværdi.
Px, rem og em – hvad hvert felt betyder
Konverteren er bygget op omkring tre felter. "Root-skriftstørrelse (px)" indeholder den grundlæggende skriftstørrelse i pixel, som rem-værdier måles i forhold til. "em-kontekst skriftstørrelse (px)" indeholder skriftstørrelsen i pixel for det specifikke element, du beregner en em-værdi for. "Værdier" er der, hvor du selv indtaster længden – i px, rem eller em. Ved udgangspunktet, før du ændrer noget, beskriver 16px, 1rem og 1em præcis den samme længde – det er den startværdi, værktøjet arbejder ud fra, indtil du selv angiver noget andet.
Sådan indstiller du root- og em-kontekst-skriftstørrelse
Feltet "Root-skriftstørrelse (px)" er et almindeligt tal, og det skal være større end 0. Standardværdien er 16px, som er det, værktøjet starter med, medmindre du ændrer det. Det er dette tal, dine rem-konverteringer måles i forhold til, så hvis dit projekts faktiske root-skriftstørrelse afviger fra standardværdien, er det denne indstilling, der sikrer, at rem-værdierne passer til dit design. Rydder du feltet, eller indtaster du noget, der ikke er et gyldigt positivt tal, viser værktøjet fejlmeddelelsen "Root-skriftstørrelsen skal være et tal større end 0."
Feltet "em-kontekst skriftstørrelse (px)" fungerer på samme måde – et tal større end 0, med standardværdien 16px – men det tjener et andet formål. Fordi en em-værdi er relativ i forhold til skriftstørrelsen på det specifikke element, den hører til, og ikke nødvendigvis root-elementet, beder værktøjet om dette elements skriftstørrelse separat. Det er dette felt, du skal bruge, når du skal beregne en em-værdi ud fra ét bestemt elements skriftstørrelse. Indtaster du noget ugyldigt her, viser værktøjet fejlmeddelelsen "em-kontekst skriftstørrelsen skal være et tal større end 0."
Indtastning af værdier, mens de opdateres live
Under "Værdier" får du ét felt for hver af de tre enheder. Rediger et af dem – px, rem eller em – og de to andre bliver genberegnet, mens du skriver, ud fra den root- og em-kontekst-skriftstørrelse, der aktuelt er sat. Lad for eksempel både root- og em-kontekst-skriftstørrelsen stå på standardværdien 16px, og skriv 24 i px-feltet: rem-feltet opdateres til at vise 1,5rem, og em-feltet opdateres til at vise 1,5em, fordi 24 divideret med 16 giver 1,5.
Negative pixelværdier er tilladt, så en værdi som -8px konverteres på samme måde som en positiv værdi – ved standardværdien på 16px bliver den til -0,5rem. Indtaster du noget i felterne under "Værdier", der ikke er et gyldigt tal, viser værktøjet fejlmeddelelsen "Indtast et tal for at konvertere."
Ændrer du root-skriftstørrelsen eller em-kontekst-skriftstørrelsen, opdateres en værdi, der allerede står i felterne, også. Står der for eksempel 40 i px-feltet ved en root-skriftstørrelse på 16px, viser rem-feltet 2,5rem. Sætter du root-skriftstørrelsen op til 20px uden at røre px-værdien, opdateres rem-feltet til 2rem – rem-resultatet følger den root-skriftstørrelse, der aktuelt er sat, ikke kun det pixeltal, du selv skrev.
Sådan læser du tabellen "Almindelige px → rem"
Under konverteringsfelterne viser værktøjet tabellen "Almindelige px → rem (16px base)" – en oversigt over almindelige pixelværdier omregnet til rem, beregnet ud fra en root-skriftstørrelse på specifikt 16px. Her kan du for eksempel se, at 8px svarer til 0,5rem, at 24px svarer til 1,5rem, og at 48px svarer til 3rem, uden at skulle skrive hver værdi ind under "Værdier". Tabellen holder sig fast til 16px-basen som en fast reference, uafhængigt af hvad du selv sætter root-skriftstørrelsen til i felterne ovenfor.
Hvor dine tal bliver behandlet
Hver konvertering sker i din browser. Intet af det, du indtaster – hverken værdierne, root-skriftstørrelsen eller em-kontekst-skriftstørrelsen – uploades til BroBroGo.
Hvem værktøjet er til
Det er til dig, der skal omregne faste pixelværdier til relative rem- eller em-enheder til et responsivt layout, dig, der vil se, hvordan en ændret root-skriftstørrelse påvirker de resulterende rem-værdier, og dig, der skal beregne en em-værdi ud fra ét bestemt elements egen skriftstørrelse. Det er også nyttigt, hvis du vil sikre dig, at dine mål fortsat fungerer, som du forventer, når en læser ændrer sin standard-skriftstørrelse.
Ofte stillede spørgsmål
Hvilken root-skriftstørrelse skal jeg starte med? Værktøjet starter på 16px, og til at begynde med stemmer 16px, 1rem og 1em overens. Bruger dit projekt en anden root-skriftstørrelse, ændrer du bare feltet "Root-skriftstørrelse (px)", så det matcher, hvorefter alle rem-værdier opdateres.
Skal jeg udfylde em-kontekst-skriftstørrelsen, hvis jeg kun konverterer rem? Feltet "em-kontekst skriftstørrelse (px)" påvirker kun den viste em-værdi, fordi em måles i forhold til et bestemt elements skriftstørrelse og ikke root-elementet. Arbejder du udelukkende med rem, kan du lade det stå på standardværdien 16px og i stedet fokusere på feltet "Root-skriftstørrelse (px)".
Kan jeg konvertere negative pixelværdier? Ja. Værktøjet accepterer negative pixelværdier og konverterer dem på samme måde som positive værdier.
Hvad sker der, hvis jeg skriver bogstaver eller lader et felt stå tomt? Hvert felt valideres for sig. En ugyldig værdi under "Værdier" viser fejlmeddelelsen "Indtast et tal for at konvertere.", en ugyldig root-skriftstørrelse viser "Root-skriftstørrelsen skal være et tal større end 0.", og en ugyldig em-kontekst-skriftstørrelse viser "em-kontekst skriftstørrelsen skal være et tal større end 0."
Bliver det, jeg skriver, sendt nogen steder hen? Nej. Hver konvertering sker i din browser, og intet af det, du indtaster, uploades til BroBroGo.