Lad os være ærlige et øjeblik: Det plejede at være en kæmpe hovedpine at definere størrelser i CSS. Du byggede en flot hjemmeside på din bærbar, men i samme sekund som nogen kiggede på den på en telefon eller zoomede ind, gik hele layoutet i stykker.
Her kommer rem-enheden ind i billedet. Hvis du har beskæftiget dig lidt med webdesign, har du sikkert set den overalt. Men hvad er en rem egentlig, og endnu vigtigere: Hvordan dælen finder din browser ud af, hvilken størrelse den rent faktisk skal vise på skærmen?
Bare rolig, der er ikke tale om svær matematik her. Hent din kaffe, så kigger vi nærmere på, hvordan browsere beregner rem–enheder ved hjælp af nogle enkle eksempler fra den virkelige verden.
Hvad står REM egentlig for?
rem står for “root em.”
Hvis du vil dykke dybere ned i historien om typografiske måleenheder, har Wikipedia en fascinerende gennemgang af em-enheden og dens fysiske rødder i de gamle trykpresser.
Men i moderne webdesign behøver du egentlig kun at forstå “root”-delen.
Forestil dig et træ. Roden er fundamentet, der nærer resten af træet. I et HTML-dokument er roden <html>-tagget. En rem-enhed kigger altså bare på skriftstørrelsen for <html>-tagget (roden) og bruger den som sit udgangspunkt.
Analogien om “grundopskriften”
Tænk på rem som at skalere en grundopskrift i køkkenet.
Lad os sige, at din bedstemors grundopskrift giver præcis 16 chocolate chip cookies.
-
Hvis du vil lave dobbelt portion, ganger du opskriften med 2. Så får du 32 cookies.
-
Hvis du kun vil have en halv portion, ganger du med 0,5. Så får du 8 cookies.
rem-enheder fungerer på nøjagtig samme måde. Browserens standard skriftstørrelse for roden er normalt 16px (vores grundopskrift).
Så når du skriver 2rem i dit CSS, laver browseren et hurtigt regnestykke:
16px (basis) × 2 (rem-værdi) = 32px.
Det er virkelig så enkelt!
Lad os se på nogle nemme eksempler
Lad os antage, at din hjemmeside bruger browserens standard skriftstørrelse på 16px for roden. Her er, hvordan browseren oversætter din CSS med rem til pixels:
-
Brødtekst (
1rem): 16px × 1 = 16px -
En stor overskrift (
2.5rem): 16px × 2,5 = 40px -
Lille footer-tekst (
0.875rem): 16px × 0,875 = 14px
Men hvad sker der, hvis du ændrer størrelsen på roden?
Lad os sige, at du beslutter, at 16px er for småt, og derfor skriver dette i dit CSS:
html {
font-size: 20px;
}Øjeblikkeligt opdaterer browseren sine beregninger for hele hjemmesiden. Den har udskiftet grundopskriften. Nu svarer de samme rem–værdier til noget helt andet:
-
1remer nu 20px (20 × 1) -
2.5remer nu 50px (20 × 2,5) -
0.875remer nu 17,5px (20 × 0,875)
Ved at ændre bare én enkelt linje kode skalerer hele din hjemmeside perfekt op. Magisk, ikke?
REM vs EM: Problemet med de russiske babusjka-dukker
Du tænker måske: “Hvorfor ikke bare bruge em?”
Mens rem kigger på root-elementet, kigger almindelige em-enheder på skriftstørrelsen for deres overordnede element (parent). Det lyder måske fint nok, indtil du begynder at indlejre elementer i hinanden, som f.eks. en liste indeni en <div> indeni en anden <div>.
At bruge em-enheder er som at lege med russiske babusjka-dukker. Hvis et overordnet element er på 1.2em, det underordnede element er på 1.2em, og det næste led igen er på 1.2em, så ganger browseren dem allesammen med hinanden (1,2 × 1,2 × 1,2). Pludselig er din tekst enorm, og du aner ikke hvorfor!
Da rem altid refererer tilbage til det ene root-element, får du aldrig denne eskalerende sneboldeffekt. Det er forudsigeligt, sikkert og afholder dig fra at rive håret ud af hovedet i frustration.
Hvorfor browsere (og brugere) elsker REM
Du sidder måske og tænker: “Hvis 1rem bare er 16px, hvorfor skriver jeg så ikke bare 16px og sparer mig selv for regnearbejdet?”
Svaret er tilgængelighed.
Det er ikke alle, der har et perfekt syn. Mange ændrer indstillingerne i deres browser, så standard skriftstørrelsen øges fra 16px to 20px eller endda 24px, for at de kan læse ubesværet.
-
Hvis du har opbygget din hjemmeside udelukkende med
px, er din tekst fastlåst. Brugerens egne indstillinger ignoreres, og de kan have svært ved at læse dit indhold. -
Hvis du derimod har bygget din side med
rem, siger browseren: “Aha! Brugeren har ændret sin root-størrelse til 24px!” Den genberegner dinerem–værdier ud fra det nye udgangspunkt på 24px, og hele din hjemmeside skalerer flot, så den passer til dem.
Din hurtige REM-huskeseddel
For at du slipper for at regne, hver gang du skriver CSS, får du her en praktisk huskeseddel baseret på standarden på 16px. Du er velkommen til at bogmærke den!
| Browserens regnestykke | Det du skriver (i rem) | Det du ønsker (i pixels) |
16 × 0,75 | 0.75rem | 12px |
| 16 × 0,875 | 0.875rem | 14px |
| 16 × 1 | 1rem (Basis) | 16px |
| 16 × 1,125 | 1.125rem | 18px |
| 16 × 1,25 | 1.25rem | 20px |
| 16 × 1,5 | 1.5rem | 24px |
| 16 × 2 | 2rem | 32px |
| 16 × 3 | 3rem | 48px |
| 16 × 4 | 4rem | 64px |
(Tip: Hvis du selv vil regne det ud, tager du bare din ønskede pixelstørrelse og dividerer den med 16. For eksempel: 24px ÷ 16 = 1.5rem).
Hvis du hellere vil slippe helt for regnearbejdet og spare tid, kan du altid bruge vores gratis rem til pixel-konverter til at beregne de præcise størrelser med det samme!
Afrunding
Og det var det! Browsere beregner rem-enheder blot ved at gange din rem-værdi med rodens skriftstørrelse. Det er bare en skalerbar opskrift, der holder din kode ren, forhindrer mareridt med størrelsesangivelser og gør nettet til et meget rarere sted for alle, der forsøger at læse dit indhold.
Har du nogle specifikke elementer på din hjemmeside, hvor du kæmper med at skifte fra px til rem? Lad mig det vide, så kan vi løse regnestykket sammen!