Naar inhoud springen
🛠️
Whiz Tools

PX naar REM naar EM Converter – Gratis CSS Eenhedenrekenmachine

Converteer pixels naar REM en EM eenheden direct. Gratis CSS eenhedenconverter voor responsief webontwerp. Ondersteunt aangepaste lettergroottes en realtime berekeningen voor nauwkeurige resultaten.

PX, REM en EM Eenhedenomzetter

Converteer tussen pixels (PX), root em (REM) en em (EM) eenheden. Voer een waarde in een willekeurig veld in om de equivalente waarden in de andere eenheden te zien.

px
px
px
rem
em
Visualisatie niet beschikbaar voor negatieve of nulwaarden

Conversiemethoden

  • PX naar REM: waarde in px ÷ basis lettergrootte
  • PX naar EM: waarde in px ÷ bovenliggend lettergrootte
  • REM naar PX: waarde in rem × basis lettergrootte
  • EM naar PX: waarde in em × bovenliggend lettergrootte
Laadcalculator...
📚

Documentatie

Eenheidconverter voor px, rem en em

Een px-naar-rem-en-em-converter zet een CSS-lengte om tussen pixels (px), root em (rem) en em, met een root-lettergrootte en een lettergrootte van het bovenliggende element die de gebruiker instelt. De drie eenheden zijn de meest gebruikte manieren om tekst en tussenruimte op te maken in CSS, de taal die wordt gebruikt om webpagina's op te maken.

Wat zijn px, rem en em?

Een pixel (px) is een vaste eenheid. Een vak dat 200px breed is ingesteld, blijft 200px breed, ongeacht welke lettergrootte de pagina gebruikt.

Een rem ("root em") is een eenheid die schaalt met de lettergrootte van het hoofdelement van de pagina, meestal de tag <html>. De meeste browsers stellen die root-lettergrootte in op 16px, tenzij een website deze wijzigt. Als de root-lettergrootte 16px is, dan is 1rem gelijk aan 16px.

Een em is een eenheid die schaalt met de lettergrootte van het bovenliggende element, het element waarin het voorkomt. Als een bovenliggend element font-size: 20px heeft, is 1em binnen dat element gelijk aan 20px.

Het belangrijkste verschil tussen rem en em is waartegen elke eenheid wordt gemeten. Rem kijkt altijd naar het root-element. Em kijkt naar het dichtstbijzijnde bovenliggende element, waardoor de waarde op elk niveau van nesting kan veranderen.

Hoe px naar rem wordt berekend

Deel de pixelwaarde door de root-lettergrootte om pixels om te zetten naar rem:

r=pRr = \frac{p}{R}

waarbij r de lengte in rem is, p de lengte in pixels en R de root-lettergrootte in pixels.

Uitgewerkt voorbeeld

Met de standaardroot-lettergrootte van 16px wordt 24px:

24 ÷ 16 = 1,5rem

Als een website de root-lettergrootte instelt op 10px (een veelgebruikte truc, uitgevoerd met html { font-size: 62.5%; }, omdat 62,5% van 16px 10px is), wordt dezelfde 24px:

24 ÷ 10 = 2,4rem

Hoe rem naar px wordt berekend

Vermenigvuldig de rem-waarde met de root-lettergrootte om rem terug om te zetten:

p=r×Rp = r \times R

waarbij p de lengte in pixels is, r de lengte in rem en R de root-lettergrootte.

Met een root van 16px wordt 1.5rem terug omgerekend naar 1,5 × 16 = 24px.

Hoe px naar em wordt berekend

Deel de pixelwaarde door de lettergrootte van het bovenliggende element om pixels om te zetten naar em:

e=pPe = \frac{p}{P}

waarbij e de lengte in em is en P de lettergrootte van het bovenliggende element in pixels.

Uitgewerkt voorbeeld

Als de lettergrootte van het bovenliggende element 20px is, wordt 24px:

24 ÷ 20 = 1,2em

Hoe em naar px wordt berekend

Vermenigvuldig de em-waarde met de lettergrootte van het bovenliggende element:

p=e×Pp = e \times P

waarbij p de lengte in pixels is, e de lengte in em en P de lettergrootte van het bovenliggende element.

Met een bovenliggend element van 20px wordt 1.2em terug omgerekend naar 1,2 × 20 = 24px.

Hoe rem naar em en em naar rem wordt berekend

Omdat rem en em tegen verschillende lettergroottes worden gemeten, zijn voor de omzetting beide nodig: de root-lettergrootte en de lettergrootte van het bovenliggende element:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

waarbij R de root-lettergrootte is en P de lettergrootte van het bovenliggende element.

Uitgewerkt voorbeeld

Met een root-lettergrootte van 16px en een lettergrootte van het bovenliggende element van 20px wordt 2rem:

2 × (16 ÷ 20) = 1,6em

Als de root-lettergrootte en de lettergrootte van het bovenliggende element gelijk zijn, is 1rem altijd gelijk aan 1em.

Wanneer elke eenheid nuttig is

Pixels zijn geschikt voor details waarvan de grootte niet moet veranderen, zoals een rand van 1px of een pictogram met een vaste breedte.

Rem wordt vaak gebruikt voor tussenruimte en typografie die op een pagina consistent moet blijven. Omdat rem altijd naar de root-lettergrootte verwijst, verandert een rem-waarde niet, ongeacht hoe diep een element is genest. Dit betekent ook dat op rem gebaseerde indelingen zich automatisch aanpassen wanneer iemand de standaardlettergrootte van de browser verhoogt, wat lezers met een verminderd gezichtsvermogen helpt.

Em werkt goed binnen één zelfstandig component, zoals een knop, waarbij de padding moet meegroeien met de lettergrootte van de knop zelf. Een veelvoorkomend probleem met em is dat de waarde zich opstapelt: als meerdere geneste elementen elk font-size: 1.2em gebruiken, wordt op elk niveau de lettergrootte van het vorige niveau vermenigvuldigd, waardoor lettergroottes sneller groeien dan bedoeld.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Na drie niveaus is de tekst ongeveer 73% groter geworden, niet 20% zoals een ontwikkelaar misschien zou verwachten van één regel met 1.2em.

De converter gebruiken

  1. Voer een waarde in in het pixel-, rem- of em-veld.
  2. De andere twee velden worden automatisch bijgewerkt, afgerond op vier decimalen.
  3. Stel de root-lettergrootte in op die van het element <html> van het project. Deze is in de meeste browsers standaard 16px en heeft alleen invloed op rem.
  4. Stel de lettergrootte van het bovenliggende element in op de lettergrootte van het element waarin een em-waarde zou staan. Deze heeft alleen invloed op em.
  5. Gebruik de kopieerknop naast een veld om de waarde ervan te kopiëren.

Beide lettergroottevelden accepteren een geheel aantal pixels; de kleinst toegestane waarde is 1px. Met de resetknop wordt de waarde gewist en worden beide lettergroottes teruggezet op 16px.

Onder de velden tekent de tool één balk per eenheid. Alle drie de balken stellen dezelfde fysieke lengte voor en zijn daarom even breed; dit is een snelle controle of de omzetting klopt. Een balk wordt tot 300px op ware pixel-lengte getekend; alles wat langer is, wordt verkleind zodat het past. Een waarde van 600px en een waarde van 900px eindigen dus beide op 300px. De balken worden alleen weergegeven wanneer de pixelwaarde groter is dan nul.

Veelgestelde vragen

Wat is het verschil tussen rem en em? Rem verwijst altijd naar de lettergrootte van het root-element. Em verwijst naar de lettergrootte van het dichtstbijzijnde bovenliggende element. Een rem-waarde blijft overal op een pagina gelijk; een em-waarde kan veranderen afhankelijk van hoe diep het element is genest.

Waarom gebruiken browsers 16px als standaardlettergrootte? 16px is al lange tijd de standaardtekstgrootte in grote browsers, omdat deze op gangbare schermen prettig leesbaar is zonder extra opmaak. Richtlijnen voor webtoegankelijkheid adviseren dat tekst tot 200% kan worden vergroot zonder de indeling van een pagina te verstoren, en 16px is daarvoor een praktisch uitgangspunt.

Wat is de truc met 62,5%? Door html { font-size: 62.5%; } in te stellen, wordt de standaardroot-lettergrootte van 16px 10px, omdat 62,5% van 16 gelijk is aan 10. Dit maakt rem-berekeningen eenvoudiger, omdat 1,6rem gelijk is aan 16px en 2,4rem gelijk is aan 24px.

Kunnen px-, rem- en em-waarden negatief zijn? Ja, voor eigenschappen die negatieve lengtes toestaan, zoals marges of CSS-transformaties. Binnenmarges kunnen in CSS niet negatief zijn; browsers negeren een negatieve waarde voor de binnenmarge. De converter verwerkt negatieve waarden, maar tekent er geen balken voor, omdat een balk geen negatieve breedte heeft.

Moet elke pixelwaarde worden omgezet naar rem? Niet noodzakelijk. Randen en andere fijne details blijven meestal in pixels staan, omdat ze zelden met de lettergrootte hoeven mee te schalen en er bij breedtes kleiner dan een pixel onregelmatig uit kunnen zien. Rem is geschikt voor tussenruimte en typografie die moet meegroeien met de voorkeur voor lettergrootte van de gebruiker.

Heeft de keuze van de eenheid invloed op de prestaties van een pagina? Nee. Browsers zetten elke CSS-lengte tijdens de lay-out om naar dezelfde interne waarde, waardoor px, rem en em even snel worden weergegeven. De keuze ertussen heeft invloed op onderhoudbaarheid en toegankelijkheid, niet op snelheid.