Så beräknar webbläsare rem-enheter

Låt oss vara ärliga ett ögonblick: att sätta storlekar i CSS brukade vara en enorm huvudvärk. Du byggde en supersnygg webbplats på din bärbara dator, men i samma sekund som någon tittade på den i mobilen eller zoomade in, så sprack hela layouten.

Det är här enheten rem kommer in i bilden. Om du har pysslat lite med webbdesign har du säkert sett den överallt. Men vad är egentligen en rem, och ännu viktigare – hur i hela friden räknar webbläsaren ut vilken storlek det faktiskt motsvarar på skärmen?

Oroa dig inte, det krävs ingen avancerad matematik här. Hämta en kopp kaffe, så går vi igenom hur webbläsare beräknar rem-enheter med hjälp av några enkla och konkreta exempel.

Vad står REM ens för?

rem står för ”root em”.

Om du vill fördjupa dig i de typografiska måttens historia har Wikipedia en fascinerande genomgång av enheten em och dess fysiska ursprung i gamla tiders tryckpressar

Men för modern webbdesign är det egentligen bara ”root”-delen du behöver förstå.

Föreställ dig ett träd. Roten (root) är basen som ger näring åt resten av trädet. I ett HTML-dokument är roten <html>-taggen. Så en rem-enhet tittar helt enkelt på teckenstorleken för <html>-taggen (roten) och använder den som sin baslinje.

Liknelsen med ”grundreceptet”

Tänk på rem som att skala ett grundrecept i köket.

Säg att din mormors grundrecept ger exakt 16 chocolate chip-kakor.

Om du vill dubbla satsen multiplicerar du receptet med 2. Du får då 32 kakor.
Om du bara vill ha en halv sats multiplicerar du med 0,5. Du får då 8 kakor.

rem-enheter fungerar på exakt samma sätt. Webbläsarens standardstorlek för teckensnitt på rotnivå är vanligtvis 16px (vårt grundrecept).

Så när du skriver 2rem i din CSS gör webbläsaren en snabb beräkning:
16px (bas) × 2 (rem-värde) = 32px.

Det är faktiskt så enkelt!

Låt oss titta på några enkla exempel

Låt oss anta och att din webbplats använder webbläsarens standardstorlek på 16px för roten. Så här översätter webbläsaren din rem-CSS till pixlar:

Brödtext (1rem): 16px × 1 = 16px
En stor rubrik (2.5rem): 16px × 2,5 = 40px
Liten sidfotstext (0.875rem): 16px × 0,875 = 14px

Men vad händer om du ändrar storleken på roten?

Säg att du tycker att 16px är för litet, så du skriver så här i din CSS:

html {
  font-size: 20px;
}

Webbläsaren uppdaterar omedelbart sin uträkning för hela webbplatsen. Den har bytt ut grundreceptet. Nu motsvarar samma rem-värden något helt annat:

1rem är nu 20px (20 × 1)
2.5rem är nu 50px (20 × 2,5)
0.875rem är nu 17,5px (20 × 0,875)

Genom att bara ändra en enda rad kod skalas hela din webbplats upp helt perfekt. Magi, eller hur?

REM vs EM: Ryska dockor-problemet

Du kanske undrar: ”Varför inte bara använda em?”

Medan rem utgår från rot-elementet, utgår vanliga em-enheter från teckenstorleken hos sitt förälderelement. Det låter ju bra, ända tills du börjar nästla element i varandra – som en lista inuti en <div> som ligger inuti en annan <div>.

Att använda em-enheter är lite som ryska dockor. Om ett förälderelement är 1.2em, barnet är 1.2em och barnbarnet är 1.2em, multiplicerar webbläsaren ihop allihop (1,2 × 1,2 × 1,2). Plötsligt är din text gigantisk och du har ingen aning om varför!

Eftersom rem alltid utgår från det enda rotelementet får du aldrig den här kumulativa snöbollseffekten. Det är förutsägbart, säkert och gör att du slipper slita ditt hår.

Varför webbläsare (och användare) älskar REM

Du kanske tänker: ”Om 1rem bara är 16px, varför skriver jag inte bara 16px och slipper räkna?”

Svaret stavas tillgänglighet.

Alla har inte perfekt syn. Många ändrar inställningarna i sin webbläsare och höjer standardstorleken från 16px till 20px eller till och med 24px för att kunna läsa bekvämt.

Om du har byggt din webbplats med enbart px är din text envist låst på sin plats. Användarens inställningar ignoreras, och de kan inte läsa ditt innehåll.
Om du däremot har byggt din sajt med rem, säger webbläsaren: ”Aha! Användaren har ändrat sin rotstorlek till 24px!” Den räknar då om dina rem-värden utifrån den nya baslinjen på 24px, och hela din sajt skalas vackert för att passa dem.

Din snabba REM-lathund

För att du ska slippa räkna varje gång du skriver CSS får du här en smidig lathund baserad på standarden 16px. Bokmärk gärna den här sidan!

Webbläsarens uträkning	Vad du skriver (i `rem`)	Vad du vill ha (i pixlar)
`16 × 0,75`	0.75rem	12px
16 × 0,875	0.875rem	14px
16 × 1	`1rem` (Bas)	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

(Proffstips: Om du vill räkna ut detta själv tar du bara din målstorlek i pixlar och delar den med 16. Till exempel: 24px ÷ 16 = 1.5rem).

Om du hellre vill slippa huvudräkningen helt och spara tid kan du alltid använda vår kostnadsfria rem till pixel-konverterare för att räkna ut de exakta storlekarna direkt!

Avslutningsvis

Och där har du det! Webbläsare beräknar rem-enheter helt enkelt genom att multiplicera ditt rem-värde med rotens teckenstorlek. Det är precis som ett skalbart recept som håller din kod ren, förhindrar storleksrelaterade mardrömmar och gör webben till en mycket trevligare plats för alla som vill läsa ditt innehåll.

Har du några specifika element på din webbplats där du har svårt att gå över från px till rem? Berätta gärna, så kan vi lösa matten tillsammans!