Sådan konverterer du pixels til rem i CSS (Enkel guide)

Har du nogensinde bygget en fantastisk, pixel-perfekt hjemmeside, blot for at indse at den ser helt ødelagt ud i det øjeblik, en bruger skruer op for sin browsers standard skriftstørrelse? Ja, det har jeg også prøvet. Det er normalt præcis det øjeblik, vi udviklere lærer på den hårde måde, at det at hardcode pixels (px) til absolut alt er en opskrift på et tilgængelighedsmareridt.

Her kommer rem-enheden ind i billedet.

Hvis du er vant til udelukkende at tænke i pixels, kan skiftet til rem føles lidt som at prøve at lære et fremmedsprog på farten. Men bare rolig – når først konceptet falder i hak, gør det faktisk dit liv som udvikler meget lettere.

Lad os gennemgå, hvordan du konverterer px til rem uden at have brug for en matematikeksamen.

Hvorfor taler vi overhovedet om Rem?

Tænk på pixels som et absolut mål. Forestil dig at bygge et hus og sige til din entreprenør: “Lav dette vindue nøjagtigt 40 tommer bredt.” Det vindue vil være 40 tommer bredt, uanset hvad der sker med resten af huset. Det er en pixel.

Tænk nu på rem som et relativt mål. I stedet for at bruge faste tommer, siger du til entreprenøren: “Lav dette vindue nøjagtigt 3 gange så bredt som vores standard fundamentsten.” Hvis du beslutter dig for at bruge større sten senere, skaleres vinduet automatisk proportionalt op.

I CSS står rem for “root em.” Det betyder slet og ret “relativt til rod-HTML-elementets skriftstørrelse.” Fordi brugere kan (og gør det) gå ind i deres browserindstillinger for at ændre deres standard skriftstørrelse for læsbarhed, betyder brugen af rem, at hele din hjemmeside vil skalere sømløst for at matche deres præferencer. Dit layout går ikke i stykker, og din tekst forbliver perfekt læselig. Win-win.

Standard-matematikken: Sådan konverterer du

Her er den gyldne regel, du skal huske: Som standard indstiller næsten alle moderne webbrowsere deres rod-skriftstørrelse til 16px.

Dette betyder, at medmindre du specifikt overskriver det i din CSS, så svarer 1rem til 16px.

For at konvertere enhver pixelværdi, du har i hovedet, til en rem-værdi, bruger du bare denne grundlæggende formel:

Ønsket pixelværdi ÷ Basis-pixelværdi (16) = rem-værdi

Lad os sige, at du kigger på et Figma-design, og du har brug for en overskrift på 24px. Du dividerer blot 24 med 16.

24 ÷ 16 = 1,5
Så i din CSS skriver du: font-size: 1.5rem;

Har du brug for en mindre billedtekst på 14px?

14 ÷ 16 = 0,875
Så skriver du: font-size: 0.875rem;

Jeg forstår det godt. At lave division i hovedet, mens du er dybt begravet i kodning, er en total humørdræber. Hvis du hellere vil springe den mentale gymnastik helt over, anbefaler jeg varmt at have et værktøj som denne Pixel til rem konverter åben i en fane. Du indtaster bare dine pixels, og den klarer det hårde arbejde for dig med det samme.

“62,5 %-tricket” (Gør matematikken latterligt nem)

Hvis du ikke ønsker at bruge en lommeregner til hver eneste linje CSS, har udviklere fundet på et smart lille hack kaldet 62,5 %-tricket.

Her er hvordan det virker. Du indstiller rod-html skriftstørrelsen til 62.5% helt øverst i dit stylesheet:

html {
  font-size: 62.5%;
}

Hvorfor 62,5 %? Fordi 62,5 % af standarden på 16px er præcis 10px.

Ved at gøre dette har du i bund og grund redefineret din “standard fundamentsten” til at være præcis 10px. Pludselig bliver matematikken utrolig simpel. I stedet for at dividere med 16, dividerer du bare med 10 (hvilket blot betyder at flytte kommaet én plads til venstre).

Vil du have 24px? Skriv blot 2.4rem.
Vil du have 14px? Skriv blot 1.4rem.
Vil du have 36px? Skriv blot 3.6rem.

Det føles som magi. Bare husk på, at hvis du hopper ind i et eksisterende projekt, hvor rod-skriftstørrelsen ikke er ændret, skal du stadig bruge den standard dividere-med-16-matematik.

Den ultimative px til rem huskeseddel

Uanset om du dividerer med 16 manuelt eller bare har brug for en hurtig referenceguide på din anden skærm, er her en huskeseddel til de mest almindelige skriftstørrelser (forudsat den standard browserstørrelse på 16px):

Hvad du ønsker (px)	Hvad du skriver (rem)	Matematikken bag
10px	`0.625rem`	10 ÷ 16
12px	`0.75rem`	12 ÷ 16
14px	`0.875rem`	14 ÷ 16
16px	`1rem`	16 ÷ 16 (Basisstørrelse)
18px	`1.125rem`	18 ÷ 16
20px	`1.25rem`	20 ÷ 16
24px	`1.5rem`	24 ÷ 16
32px	`2rem`	32 ÷ 16
36px	`2.25rem`	36 ÷ 16
48px	`3rem`	48 ÷ 16
64px	`4rem`	64 ÷ 16

Et sidste tip før du går

Du behøver ikke at bruge rem til absolut alt. Det er fantastisk til skriftstørrelser, margener, polstring (padding) og layoutbredder. Men til små dekorative ting som en tynd 1px kant (border: 1px solid black), er det helt fint – og normalt foretrukket – bare at holde sig til standard pixels!

Gå nu ud og kod ansvarligt. Dine brugere (og deres syn) vil takke dig.