Hvis du har brugt bare lidt tid på at nørkle med CSS, har du sikkert siddet og kigget på et design-mockup og tænkt: “Bør jeg bruge pixels her, eller skal jeg gøre dette til en rem-værdi?”
Hvis du arbejder med en Full HD-skærmbredde — specifikt 1920px — og ønsker at omdanne det til rem, er du kommet til det rette sted. Vi gennemgår den præcise matematik, forklarer hvorfor det virker ved hjælp af en superenkel analogi, og hjælper dig hurtigt tilbage til kodningen.
Det hurtige svar: 1920px til rem
Lad os gå lige til sagen. Forudsat at din hjemmeside bruger den standardmæssige skriftstørrelse i browseren på 16px, er 1920px præcis 120rem.
Hvordan kom vi frem til det? Det er et enkelt regnestykke:
1920 ÷ 16 = 120
Det er alt. Men hvis du vil forstå, hvorfor vi dividerer med 16, hvorfor vi overhovedet bruger rem til at starte med, eller hvordan du helt undgår at lave dette regnestykke, så bliv hængende et øjeblik.
(Eksperttip: Hvis du er træt af at lave disse udregninger i hovedet, kan du blot gemme en praktisk pixel til rem-omregner som bogmærke til at gøre det hårde arbejde for dig).
Pixels vs. Rems: “Bage”-analogien
For at forstå, hvorfor webudviklere er så besatte af rem, hjælper det at træde væk fra computeren og gå ind i køkkenet.
Tænk på pixels (px) som en stiv bageform af metal. Hvis du har en 9-tommers kageform, vil den altid være 9 tommer. Det er ligegyldigt, om du bager en kage til to personer eller tyve personer; formen nægter at ændre størrelse. I webdesign er en pixel en fast, absolut enhed. Hvis du indstiller en boks til 1920px, forbliver den 1920px, selvom brugeren kigger på den på en lille smartphone eller har dårligt syn og har brug for, at alt er zoomet ind.
Rems er derimod som en fleksibel opskrift. Forestil dig en pandekageopskrift, der kræver “1 kop mel pr. person”. Hvis én person spiser, bruger du 1 kop. Hvis fire personer spiser, skalerer den automatisk til 4 kopper.
I CSS står rem for “root em”. Den kigger på roden (den grundlæggende skriftstørrelse, din bruger har indstillet i sin browser) og skalerer alt proportionalt derfra.
Det magiske tal: 16
Som standard indstiller stort set alle webbrowsere root-skriftstørrelsen til 16px.
Så når du beder CSS om at gøre en container 1rem bred, siger browseren: “Okey, grundstørrelsen er 16px. Lad os gøre denne container 16px bred.”
Hvis du vil have en Full HD-wrapper, der er 1920 pixels bred, spørger du bare dig selv: “Hvor mange gange går 16 op i 1920?”
1920 ÷ 16 = 120
Du skriver max-width: 120rem; i dit stylesheet, og så er du kørende. Og hey, hvis du nogensinde har brug for at regne baglæns (som når du læser en andens kode og undrer dig over, hvad i alverden 120rem svarer til i almindelige skærmstørrelser), kan du altid bruge en rem til pixel-omregner til at regne det ud.
Hvorfor bør du gå op i det? (Tilgængelighedsvinklen)
Du tænker måske: “Matematik er irriterende. Hvorfor skriver jeg ikke bare 1920px og kalder det en dag?”
Det kunne du også sagtens. Men ved at opbygge med rem gør du din hjemmeside utroligt brugervenlig for brugere, der har brug for at zoome ind. Hvis en svagsynet bruger ændrer sin standard-skriftstørrelse i browseren fra 16px til 24px, vil et websted opbygget udelukkende med px stædigt beholde samme størrelse, hvilket ofte medfører, at tekst overlapper eller bliver ulæselig.
Hvis du har opbygget dit websted med rem, tilpasser hele websitet sig og skalerer perfekt op i overensstemmelse med brugerens præferencer. Det er stort set som magi, og det får dig til at fremstå som en dygtig udvikler, der reelt går op i tilgængelighed.
Din hurtige CSS-oversigt
Hvis du ikke har lyst til at finde lommeregneren frem hver eneste gang, du skriver CSS, er her en hurtig referenceguide baseret på standarden med en root på 16px.
Formlen: Mål-størrelse i pixel ÷ 16 = rem-værdi
- 16px = 1rem (Grundlinjen)
- 24px = 1.5rem
- 32px = 2rem (God til standardoverskrifter)
- 48px = 3rem
- 64px = 4rem
- 768px = 48rem (Almindeligt breakpoint til tablets)
- 1024px = 64rem (Standard breakpoint til desktop)
- 1440px = 90rem (Stor desktop)
- 1920px = 120rem (Full HD-skærm)
Næste gang du sidder over for et design på 1920px, skal du blot huske på den fleksible opskrift. Divider med 16, indsæt 120rem, og fortsæt med at bygge fantastiske ting!