Wat doet de px naar rem & em Converter
De px naar rem & em Converter zet pixelwaarden (px) om naar rem en em, en andersom. Je voert een waarde in bij een van de drie eenheden, en de tool berekent automatisch de bijbehorende waarden in de andere twee eenheden en toont die meteen. Je kunt daarnaast een eigen root-lettergrootte en een eigen em-contextlettergrootte instellen, zodat de omrekening klopt voor de specifieke situatie waarin je werkt.
Voor wie is deze converter handig
Deze converter is bedoeld voor wie vaste pixelwaarden wil omzetten naar relatieve rem- of em-eenheden voor responsive design. Hij is ook handig als je wilt begrijpen hoe een andere root-lettergrootte de bijbehorende rem-waarden verandert, of als je een em-waarde moet berekenen op basis van de lettergrootte van een specifiek element. Tot slot gebruik je de tool om te controleren of je opmaak goed blijft meeschalen wanneer een lezer de standaard lettergrootte van zijn browser aanpast.
Px, rem en em: waar zit het verschil
Px is een vaste lengte. Rem wordt berekend ten opzichte van de root-lettergrootte van de pagina: bij een root van 16px is 1rem dus gelijk aan 16px. Em is relatief aan de lettergrootte van het element waarin de waarde staat, en die lettergrootte is niet altijd hetzelfde als de root-lettergrootte. Door lettergroottes en marges in rem te definiëren, schaalt alles netjes mee wanneer een lezer de standaard lettergrootte van zijn browser aanpast.
De root-lettergrootte instellen
Bij "Root-lettergrootte (px)" vul je de basislettergrootte in pixels in. Standaard staat dit veld op 16px, en bij de standaardinstellingen zijn 16px, 1rem en 1em aan elkaar gelijk. De root-lettergrootte moet een getal groter dan 0 zijn — vul je hier iets anders in, dan verschijnt de melding "De root-lettergrootte moet een getal groter dan 0 zijn." Pas dit veld aan zodra je CSS een andere root-lettergrootte gebruikt dan 16px, en elke rem-waarde wordt meteen herberekend.
De em-contextgrootte gebruiken
Het veld "em context lettergrootte (px)" geeft de lettergrootte van het element in pixels waarvoor je een em-waarde wilt omrekenen. Ook dit veld staat standaard op 16px en moet een getal groter dan 0 zijn; vul je hier iets ongeldigs in, dan verschijnt de melding "De em-context lettergrootte moet een getal groter dan 0 zijn." Omdat em relatief is aan de lettergrootte van het element zelf, en dat niet altijd de root is, zet je dit veld op de lettergrootte van dat specifieke element om een kloppende em-waarde te krijgen. Komen de twee lettergroottes overeen, dan houd je de em-contextgrootte gewoon gelijk aan de root-lettergrootte.
Een waarde omrekenen
Vul bij "Waarden" een getal in bij px, rem of em. Zodra je typt in een van de drie velden, werken de andere twee direct mee en zie je het resultaat geconverteerd over alle drie de eenheden. Negatieve pixelwaarden zijn toegestaan. Voer je een ongeldige waarde in, dan verschijnt de melding "Voer een getal in om te converteren."
De tabel met veelvoorkomende px → rem-waarden
Onder de invoervelden staat de tabel "Veelvoorkomende px → rem (16px basis)". Die tabel rekent een reeks veelgebruikte pixelwaarden om naar rem, uitgaande van een root-lettergrootte van 16px — de gangbare basis waarmee de meeste sites beginnen. Werk je met een andere root-lettergrootte, gebruik dan de omrekening bovenaan de pagina in plaats van deze tabel.
Privacy
Elke conversie wordt in je browser uitgevoerd. Niets van wat je typt, wordt geüpload naar BroBroGo.
Veelgestelde vragen
Wat is het verschil tussen px, rem en em?
De eenheid px is een vaste lengte. De eenheid rem wordt berekend ten opzichte van de root-lettergrootte van de pagina (bij een root van 16px is 1rem dus gelijk aan 16px). De eenheid em is relatief aan de lettergrootte van het element waarin deze staat. Door lettergroottes en marges in rem te definiëren, schaalt alles netjes mee wanneer een gebruiker de standaard lettergrootte van de browser aanpast.
Waarom is er een aparte em-contextgrootte?
De eenheid em is relatief ten opzichte van de lettergrootte van het element zelf, wat niet altijd gelijk is aan de root. Stel de em-context in op de lettergrootte van dat specifieke element om de em-waarde correct te berekenen. Houd deze gelijk aan de root als beide overeenkomen.
Wat als mijn root-lettergrootte geen 16px is?
Pas het veld voor de root-lettergrootte aan zodat dit overeenkomt met je CSS, en elke rem-waarde wordt direct bijgewerkt. De snelle tabel hieronder is een handige handleiding voor de veelgebruikte basis van 16px waar de meeste sites mee beginnen.