Hur man konverterar pixlar till rem i CSS (Enkel guide)

Har du någonsin byggt en snygg webbplats med pixelprecision, bara för att inse att den ser helt trasig ut så fort en användare ökar webbläsarens standardteckenstorlek? Ja, jag också. Det är oftast i det ögonblicket vi utvecklare lär oss den hårda vägen att hårdkodning av pixlar (px) för precis allt är ett recept för en tillgänglighetsmässig mardröm.

Säg hej till enheten rem.

Om du är van vid att tänka strikt i pixlar kan det kännas lite som att försöka lära sig ett främmande språk i farten att byta till rem. Men oroa dig inte – när polletten väl faller på plats gör det faktiskt ditt liv som utvecklare mycket enklare.

Låt oss gå igenom hur man konverterar px till rem utan att behöva en examen i matematik.

Varför pratar vi ens om rem?

Tänk på pixlar som ett absolut mått. Tänk dig att du bygger ett hus och säger till din entreprenör: ”Gör det här fönstret exakt 40 tum brett.” Det fönstret kommer att vara 40 tum brett oavsett vad som händer med resten av huset. Det är en pixel.

Nu, tänk på rem som ett relativt mått. Istället för att använda fasta tum säger du till entreprenören: ”Gör det här fönstret exakt 3 gånger så brett som våra standardtegelstenar i grunden.” Om du bestämmer dig för att använda större tegelstenar senare, skalas fönstret automatiskt upp proportionellt.

I CSS står rem för ”root em”. Det betyder helt enkelt ”relativt till rot-HTML-elementets teckenstorlek”. Eftersom användare kan (och gör det) gå in i sina webbläsarinställningar för att ändra standardteckenstorleken för läsbarhet, innebär användning av rem att hela din webbplats sömlöst skalas för att matcha deras preferenser. Din layout kommer inte att gå sönder, och din text kommer att förbli perfekt läsbar. Win-win.

Standardmatematiken: Hur man konverterar

Här är den gyllene regeln du behöver memorera: Som standard ställer nästan alla moderna webbläsare in sin rotteckenstorlek till 16px.

Detta innebär att om du inte specifikt skriver över det i din CSS, så motsvarar 1rem exakt 16px.

För att konvertera ett pixelvärde du har i huvudet till ett rem-värde, använder du bara denna enkla formel:

Mål-pixelvärde ÷ Bas-pixelvärde (16) = rem-värde

Låt oss säga att du tittar på en Figma-design och behöver en rubrik som ska vara 24px. Du delar helt enkelt 24 med 16.

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

Behöver du en mindre bildtext som är 14px?

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

Lyssna, jag fattar. Att hålla på med division i huvudet när man är djupt inne i kodandet är en riktig glädjedödare. Om du hellre skippar den mentala gymnastiken helt, rekommenderar jag starkt att ha ett verktyg som denna Pixlar till rem omvandlare öppen i en flik. Du matar bara in dina pixlar, så gör den grovjobbet åt dig direkt.

”62,5 %-tricket” (Gör matematiken löjligt enkel)

Om du inte vill använda en miniräknare för varje enskild rad CSS, har utvecklare kommit på ett smart litet knep som kallas 62,5 %-tricket.

Så här fungerar det. Du ställer in rotteckenstorleken för html till 62.5% längst upp i din stilmall:

html {
  font-size: 62.5%;
}

Varför 62,5 %? För att 62,5 % av standardvärdet 16px är exakt 10px.

Genom att göra detta har du i princip definierat om din ”standardtegelsten” till att vara exakt 10px. Plötsligt blir matematiken löjligt enkel. Istället för att dela med 16, delar du bara med 10 (vilket bara innebär att flytta kommatecknet ett steg till vänster).

Vill du ha 24px? Skriv bara 2.4rem.
Vill du ha 14px? Skriv bara 1.4rem.
Vill du ha 36px? Skriv bara 3.6rem.

Det känns som magi. Kom bara ihåg att om du hoppar in i ett befintligt projekt där rotteckenstorleken inte har rörts, måste du fortfarande förlita dig på den vanliga dela-med-16-matematiken.

Den ultimata lathunden för px till rem

Oavsett om du delar med 16 manuellt eller bara behöver en snabbguide att ha på din andra skärm, här är en lathund för de vanligaste teckenstorlekarna (förutsatt standardinställningen i webbläsaren på 16px):

Vad du vill ha (px)	Vad du skriver (rem)	Matematiken som används
10px	`0.625rem`	10 ÷ 16
12px	`0.75rem`	12 ÷ 16
14px	`0.875rem`	14 ÷ 16
16px	`1rem`	16 ÷ 16 (Basstorlek)
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

Ett sista tips innan du går

Du måste inte använda rem för precis allt. Det är fantastiskt för teckenstorlekar, marginaler, utfyllnad (padding) och layoutbredder. Men för små dekorativa saker som en tunn 1px ram (border: 1px solid black), är det helt okej – och vanligtvis att föredra – att bara hålla sig till standardpixlar!

Gå ut och koda ansvarsfullt. Dina användare (och deras syn) kommer att tacka dig.