CSS px ↔ rem Converter
Converteer tussen CSS-eenheden px en rem.
px (Pixels)
Een absolute eenheid die één pixel op het scherm vertegenwoordigt. Heeft een vaste grootte en is beperkt voor responsief ontwerp.
rem (Root EM)
Een relatieve eenheid gebaseerd op de lettergrootte van het rootelement (html). Voordelig voor toegankelijkheid en responsief ontwerp.
Conversie Formule
Gebruiksaanbevelingen
- • Lettergrootte: rem aanbevolen
- • Afstand (margin, padding): rem aanbevolen
- • Rand: px bruikbaar
- • Media queries: rem aanbevolen
Complete CSS Eenheid Gids
Het kiezen van de juiste CSS-eenheden in webontwikkeling beïnvloedt de gebruikerservaring en toegankelijkheid aanzienlijk. Leer de verschillen tussen px en rem en hoe u ze in de juiste situaties kunt gebruiken.
📐 Kenmerken
- • Absolute eenheid met 1:1 correspondentie met schermpixels
- • Consistente grootte in alle browsers
- • Nauwkeurige lay-outcontrole mogelijk
- • Niet beïnvloed door gebruikersinstellingen
✅ Aanbevolen Gebruiksscenario's
- • Randdikte (1px, 2px)
- • Schaduwverschuiving
- • Pictogramformaten (16px, 24px)
- • Fijne afstandsinstellingen
⚠️ Waarschuwingen
- • Negeert gebruikerslettergrootte-instellingen
- • Kan toegankelijkheidsproblemen veroorzaken
- • Beperkt voor responsief ontwerp
📐 Kenmerken
- • Gebaseerd op de lettergrootte van het rootelement (html)
- • Weerspiegelt gebruikersinstellingen
- • Behoudt consistente proporties
- • Toegankelijkheidsvriendelijk
✅ Aanbevolen Gebruiksscenario's
- • Lettergrootte-instellingen
- • Afstand (margin, padding)
- • Containerformaten
- • Media query breekpunten
💡 Voordelen
- • Behoudt proporties bij schaling
- • Verbetert toegankelijkheid
- • Eenvoudig onderhoud
🎯 Eenheidsspecifieke Gebruiksstrategie
Typografie
Gebruik rem voor lettergroottes en regelafstand rem
Lay-out
Gebruik rem voor afstand en containers rem
Details
Gebruik px voor randen en schaduwen px
📱 Responsieve Ontwerp Tips
Mobile-first Benadering
Stel de basislettergrootte in op 16px en schaal met rem-eenheden
html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }Media Query Gebruik
Handhaaf consistentie met rem-gebaseerde breekpunten
@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}♿ Toegankelijkheidsoverwegingen
✅ Aanbevolen Praktijken
- • Stel lettergroottes in met rem-eenheden
- • Handhaaf minimale lettergrootte van 16px
- • Voldoende regelafstand (1,5 of meer)
- • Minimale aanraakdoel van 44px
❌ Te vermijden
- • Vaste px-waarden gebruiken voor lettergroottes
- • Kleine tekst onder 12px
- • Vaste containerbreedtes
- • Regelafstand van 1,0 of minder
🔧 Browserondersteuning en compatibiliteit
px Eenheid
Perfecte ondersteuning in alle browsers. Beschikbaar vanaf IE6+.
rem Eenheid
Perfecte ondersteuning in IE9+ en moderne browsers. Fallback nodig voor IE8 en lager.
Voor IE8-ondersteuning: Declareer eerst de px-waarde, voeg dan de rem-waarde toe als fallback
font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */