Wat het doet
Deze tool rekent CSS-lengtes om tussen pixels en de relatieve eenheden rem en em. Typ één waarde zoals 24px en u krijgt 1.5rem, zet meerdere waarden onder elkaar om ze in één keer om te rekenen, of plak een complete stylesheet en elke px-waarde wordt ter plekke herschreven. Een referentietabel toont de gangbare maten van 1px tot 128px bij uw basislettergrootte. Er verlaat niets uw browser.
Zo gebruikt u het
- Plak CSS of typ één waarde per regel. Getallen zonder eenheid gelden als px (of als rem/em bij omgekeerde richting), en een waarde in de andere eenheid wordt de andere kant op omgerekend.
- Stel de Basislettergrootte in. Alle browsers gebruiken standaard 16px; sommige projecten zetten
html { font-size: 62.5% }zodat 1rem = 10px. - Kies de Richting (px → rem of rem → px), de Eenheid (rem of em) en het aantal Decimalen.
- Gebruik eventueel Waarden kleiner dan dit in px laten om randen van 1px en andere haarlijnen in px te houden.
- Kopieer het resultaat met de knop erboven.
Voorbeeld
/* before */
.title { font-size: 24px; margin-bottom: 12px; }
/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }Waarden die geen px zijn, zoals percentages, kleuren, bestandsnamen in url() en klassen als .mt-16px, blijven ongewijzigd. 0px wordt 0.
px, rem en em
- px is een absolute eenheid en negeert de lettergrootte die de lezer verkiest.
- rem (‘root em’) is een veelvoud van de lettergrootte van het
html-element. Zet een lezer zijn browser op 20px, dan is 1rem 20px en schaalt de hele layout mee. - em is een veelvoud van de lettergrootte van het huidige element. Handig voor ruimte die bij de eigen tekst hoort, maar geneste em-waarden vermenigvuldigen zich, daarom is rem de veiligere standaard.
Ook media queries worden omgerekend: @media (min-width: 768px) wordt 48rem (of 48em), zodat breakpoints consistent blijven als de lezer tekst vergroot. In media queries verwijzen rem en em allebei naar de standaardlettergrootte van de browser, niet naar uw html-regel.
Veelgestelde vragen
› Hoe reken ik px om naar rem?
Deel de pixelwaarde door de lettergrootte van het root-element. Met de standaard 16px van browsers is 24px ÷ 16 = 1.5rem en 12px ÷ 16 = 0.75rem. Terug gaat met vermenigvuldigen: 2rem × 16 = 32px.
› Wat is het verschil tussen rem en em?
rem is relatief aan de lettergrootte van het html-element, dus 1rem is overal op de pagina even groot. em is relatief aan de lettergrootte van het huidige element (of van de ouder bij font-size zelf) en vermenigvuldigt zich dus bij geneste elementen. Gebruik rem voor de meeste maten en em als iets met zijn eigen tekst moet meeschalen, zoals de padding van een knop.
› Waarom rem in plaats van px?
Als een lezer de standaardlettergrootte in de browserinstellingen vergroot, groeien rem-maten mee terwijl px vast blijft. rem houdt layouts toegankelijk en laat u een heel ontwerp schalen door één rootwaarde te wijzigen.
› Moet ik randen van 1px omrekenen?
Meestal niet. Een lijn van 0.0625rem kan bij sommige zoomniveaus wazig worden of verdwijnen. Zet ‘Waarden kleiner dan dit in px laten’ op 2px, dan blijven randen en andere piepkleine waarden in px.