Hvad er 1rem i pixels? Den komplette guide uden fagjargon

Hvad er 1rem i pixels? Den komplette guide uden fagjargon

Hvis du har beskæftiget dig med webdesign eller skrevet CSS på det seneste, er du sikkert stødt på udtrykket “rem” og har straks tænkt: Vent, hvorfor kan vi ikke bare bruge pixels? Og endnu vigtigere: hvad er 1rem helt præcist i pixels?

Her er det korte svar uden omsvøb: Som standard svarer 1rem til 16 pixels.

Men før du går i gang med at hårdkode 16px overalt, så lad os tale om, hvorfor rem overhovedet eksisterer, og hvorfor det at stole udelukkende på faste pixels kan gøre din hjemmeside meget mindre brugervenlig, end du tror.

Hvad er en “rem” overhovedet?

“Rem” står for Root EM. Du skal ikke bekymre dig for meget om typografiens århundreder gamle historie, som “em” stammer fra. I moderne webdesign refererer “root” (roden) blot til dit centrale HTML-dokument.

Tænk på det som at bage småkager. “Root” er din grundopskrift. Hvis grundopskriften siger “1 portion = 16 småkager”, så vil 2 portioner (2rem) give dig 32 småkager.

Hvis du senere beslutter dig for at ændre grundopskriften, så 1 portion svarer til 20 småkager, betyder 2rem pludselig 40 småkager. Du behøvede ikke at gå igennem og ændre instruktionen om “2 portioner” alle steder; du opdaterede bare grundplanen, og alt andet skalerede perfekt.

Pixels mod Rems: Den store duel

Pixels er urokkelige. De er som at hugge instruktioner i en stentavle. 16px er præcis 16 pixels på en skærm, uanset hvad.

Så hvad sker der, hvis en svagsynet bruger ændrer sin browsers standard skriftstørrelse til 24px, så de kan læse behageligt uden at knibe øjnene sammen? Hvis din side udelukkende er bygget med pixels, forbliver din tekst stædigt fastlåst på 16px. Du har i bund og grund ignoreret deres browserindstillinger.

Hvis du derimod bruger rem, lytter din side aktivt til brugeren. 1rem betyder i bund og grund bare “1 gang hvad end brugerens standardindstilling er”. Hvis deres standard er 16px, ser de 16px. Hvis deres standard er 24px, skaleres din 1rem tekst problemfrit op til 24px. Det er en øjeblikkelig gevinst for tilgængeligheden, som gør din side bedre for alle.

Regnestykket (og hvordan man undgår det)

At omregne rems til pixels er bare simpel multiplikation. Du tager din basispixelstørrelse (normalt 16) og ganger den med din rem-værdi.

• 0.5rem = 8px (16 x 0.5)

• 1.5rem = 24px (16 x 1.5)

• 2rem = 32px (16 x 2)

Men lad os være helt ærlige: ingen bryder sig om at lave hovedregning, mens de er dybt begravet i kodning. Hvis du prøver at finde ud af, hvad 2.125rem er på stående fod, behøver du ikke at finde lommeregneren frem. Lad værktøjerne gøre det hårde arbejde for dig.

Sæt bogmærke ved disse utroligt praktiske omregnere for at spare tid:

• Har du en rem-værdi, men har brug for at vide, hvor stor den rent faktisk vil se ud? Brug denne Rem til pixel konverter.

• Sidder du og kigger på et pixel-perfekt Figma-design og har brug for at oversætte det til CSS? Hop over til Pixel til rem konverter.

Udviklerens Cheat Sheet

Hvis du bare har brug for en hurtig reference til de mest almindelige størrelser, er her din oversigt. Dette forudsætter den standard 16px browser-basisstørrelse.

Almindeligt anvendelsesområde	Pixel-tilsvarende	REM-værdi
Lille UI-afstand eller rammer	4px	0.25rem
Marginer, padding, små mellemrum	8px	0.5rem
Lille tekst, billedtekster, metadata	12px	0.75rem
Standard brødtekst	16px	1rem
Underoverskrifter, intro-afsnit	20px	1.25rem
H3-overskrifter, store knapper	24px	1.5rem
H2-overskrifter, sektionstitler	32px	2rem
H1-overskrifter, hero-tekst	48px	3rem