Pixel ↔ REM
Converteer tussen pixels en REM voor CSS
Hoe Pixel ↔ REM te gebruiken
Converteer tussen pixels en REM voor CSS Gratis online tool, geen registratie, geen opdringerige advertenties. Gebruik het nu.
Waarom converteren webontwikkelaars tussen pixels en REM?
Moderne CSS-best practices geven de voorkeur aan relatieve eenheden (REM, EM) boven absolute pixels voor lettergroottes en afstanden. Dit zorgt ervoor dat gebruikers die een grotere lettergrootte instellen in de voorkeuren van hun browser, de tekst proportioneel zien schalen — een fundamentele vereiste voor webtoegankelijkheid en conformiteit met WCAG-richtlijnen.
- Lettergrootte: In plaats van
font-size: 16px, gebruik jefont-size: 1rem. Als de basislettergrootte van de browser van een gebruiker 20px is, schaalt alles proportioneel — dit garandeert een goede ervaring voor mensen met een visuele beperking die de systeemlettergrootte verhogen. - Afstand en opvulling: Marges en opvulling in REM passen zich aan de tekstvoorkeur van de gebruiker aan.
padding: 1.5remis toegankelijker danpadding: 24pxen respecteert de persoonlijke instelling van de gebruiker. - Implementatie van ontwerpsystemen: Ontwerptools (Figma, Sketch) exporteren in pixels. Converteer naar REM voordat je CSS schrijft zodat het ontwerpsysteem van het begin af aan toegankelijk is.
- Media queries: Op REM gebaseerde media queries respecteren de tekstgroottevoorkeur van de gebruiker.
@media (min-width: 48rem)wordt geactiveerd op 768px voor een basis van 16px, maar op een hogere pixelwaarde voor gebruikers met grotere lettertypen. - Componentbibliotheken: Het bouwen van herbruikbare componenten in REM zorgt ervoor dat ze consistent gedrag vertonen in verschillende basislettergrootte-contexten — belangrijk voor degenen die gedeelde ontwerpsystemen bouwen.
REM vs EM: REM (Root EM) is altijd relatief aan de lettergrootte van het root-element (html) — consistent en voorspelbaar in het hele document. EM is relatief aan de lettergrootte van het huidige element — kan onverwacht accumuleren in geneste elementen. REM heeft de voorkeur voor de meeste gebruiksscenario's.
Frequently Asked Questions
Wat is de standaard lettergrootte van de browser?
De standaardwaarde is 16px in alle grote browsers (Chrome, Firefox, Safari, Edge). Gebruikers kunnen dit wijzigen in de browserinstellingen — en dat is precies het doel van het gebruik van REM. 1rem = 16px standaard, maar kan 18px, 20px of zelfs 12px zijn afhankelijk van de gebruikersvoorkeur.
Waarom gebruiken sommige ontwikkelaars html { font-size: 62.5% }?
Het instellen van de rootlettergrootte op 62,5% van 16px = 10px maakt het mentaal rekenen gemakkelijker: 1,6rem = 16px, 2,4rem = 24px. Maar dit overschrijft de voorkeursletter grootte van de gebruiker, waardoor het toegankelijkheidsdoel van REMs gedeeltelijk wordt ondermijnd. Een betere aanpak is het gebruik van CSS calc() of gewoon delen door 16.
Wanneer moet ik PX gebruiken in plaats van REM?
Gebruik PX voor randen (1px-randen moeten altijd 1px blijven), schaduwen en elementen waar de exacte pixelgrootte van belang is ongeacht de tekstvoorkeur. Gebruik REM voor lettergroottes, opvulling, marges en elke afstand die met de tekst moet schalen voor betere toegankelijkheid.
Wat is het verschil tussen REM, EM en PX?
PX is absoluut — altijd dezelfde grootte ongeacht de configuratie. EM is relatief aan de lettergrootte van het ouderelement — kan accumuleren in geneste elementen. REM is relatief aan de rootlettergrootte — consistent in het hele document. Voor een toegankelijk ontwerp, geef de voorkeur aan REM boven PX voor lettergroottes en afstanden.
Hoe converteer ik een heel ontwerp van pixels naar REM?
Deel elke pixelwaarde door de rootlettergrootte (standaard: 16). Zo wordt 24px ÷ 16 = 1,5rem. Sass-functies (px-to-rem()) of PostCSS-plug-ins kunnen deze conversie automatiseren in een hele codebase. Er zijn ook VS Code-extensies die automatisch converteren tijdens het typen.
REM vs EM vs PX vs VW/VH vs percentages
PX is absoluut — precies maar niet adaptief. REM schaalt met de rootlettergrootte — beter voor typografie en toegankelijke afstand. EM schaalt met de lettergrootte van het ouderelement — handig voor afstand op componentniveau. VW/VH zijn percentages van het viewport — handig voor vloeiende lay-outs. Percentages zijn relatief aan het ouderelement — essentieel voor responsieve kolombreedtes. Modern CSS combineert: REM voor typografie en afstand, VW/VH voor algemene lay-out en percentages voor kolombreedtes.