PX naar REM omrekenen

Voer een waarde in een willekeurige eenheid in en krijg de omrekening in de andere. Standaard is 1rem = 16px, de lettergrootte van browsers; pas die aan als je CSS een andere gebruikt. Je kunt ook een blok CSS plakken en alle px in één keer naar rem omzetten.

Eenhedenconverter

px
px
px
rem is relatief aan de lettergrootte van het rootelement (html), em en % aan die van het ouderelement; 1pt = 1/72 inch = 1,333px; 1vw = 1% van de vensterbreedte.

Omrekentabel

pxremempt%

Een blok CSS van px naar rem omzetten

px, rem en em: wat gebruik je?

De pixel (px) is een vaste eenheid. rem ("root em") is relatief aan de lettergrootte van het html-element, die in alle browsers 16px is tenzij de gebruiker die aanpast: dus 1rem = 16px, 1,5rem = 24px en 0,875rem = 14px. em is relatief aan de lettergrootte van het ouderelement en stapelt zich dus op bij geneste elementen.

Rem gebruiken voor lettergroottes, marges en witruimte respecteert de instellingen van mensen die de lettergrootte van hun browser vergroten vanwege een visuele beperking, zoals de toegankelijkheidsrichtlijnen WCAG aanraden. Voor dunne randen en schaduwen blijft px handig.

Formule om px naar rem om te rekenen

rem = px ÷ basisgrootte. Met de standaardbasis van 16px: 24px ÷ 16 = 1,5rem. En omgekeerd: px = rem × 16. Sommige projecten zetten html { font-size: 62.5%; } zodat 1rem gelijk is aan 10px en het rekenen makkelijker wordt; vul in dat geval 10 in als basisgrootte.

vw en vh zijn 1% van de breedte en hoogte van het venster: handig voor vloeiende typografie in combinatie met clamp(), bijvoorbeeld font-size: clamp(1rem, 2.5vw, 2rem).