Zo gebruik je deze tool
- Stel de basislettergrootte in als uw site deze aanpast (bijvoorbeeld: html { font-size: 62.5% } maakt de basis 10px).
- Voer in een van beide velden een waarde in om px naar rem of rem naar px om te rekenen. Schakel over naar em als u rekent ten opzichte van een bovenliggend element.
- Gebruik de tabel om snel waarden op te zoeken of plak een CSS-snippet om alle px-lengtes in één keer om te rekenen en het resultaat te kopiëren.
Hoe het werkt
rem = px ÷ basislettergrootte. Bij de standaardbasis van 16px is 24px gelijk aan 1.5rem en 14px aan 0.875rem. em gebruikt dezelfde formule, maar dan met de lettergrootte van het bovenliggende element. Daardoor vermenigvuldigen geneste em-waarden zich; rem voorkomt dat, omdat het altijd verwijst naar de basis.
Met rem voor lettergroottes en tussenruimtes schaalt tekst mee wanneer iemand de standaardlettergrootte in de browserinstellingen verhoogt. Dat helpt mensen met een verminderd zicht. Waarden worden afgerond op vier decimalen.
De snippetconverter past getallen aan die worden gevolgd door px. Opmerkingen, url(…) en strings tussen aanhalingstekens blijven ongewijzigd. De converter behoudt 1px als u dat instelt (dunne randen blijven meestal 1px), schrijft 0px als 0 en laat standaard voorwaarden in @media en @container ongemoeid. In media queries verwijzen rem en em namelijk altijd naar de oorspronkelijke lettergrootte van de browser, ongeacht de ingestelde basislettergrootte. De converter interpreteert calc() niet verder dan het vervangen van de px-getallen erin. Dat is nog steeds correct, omdat elke lengte afzonderlijk wordt omgerekend.
Voorbeelden
Standaardbasis
Bij een basis van 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
De 62,5%-truc
Als uw CSS html { font-size: 62.5% } instelt, is de basis 10px. Dan is 14px gelijk aan 1.4rem en 24px aan 2.4rem. Stel de basislettergrootte in op 10.
Een component omrekenen
padding: 24px 16px; border: 1px solid #ddd; wordt padding: 1.5rem 1rem; border: 1px solid #ddd; als ‘1px-waarden behouden’ is ingeschakeld.
Veelgestelde vragen
Kan ik beter rem of em gebruiken?
Gebruik rem voor de meeste lettergroottes, tussenruimtes en lay-out, omdat het overal voorspelbaar werkt. Gebruik em als iets moet meegroeien met de tekstgrootte van het eigen onderdeel, zoals de padding in een knop.
Waarom worden media queries niet naar rem omgerekend?
Dat kan, maar in een media query is 1rem altijd gelijk aan de standaardlettergrootte van de browser (meestal 16px), niet aan de font-size van html. Daarom slaat de converter deze standaard over. Schakel de optie uit als u toch door 16 deelt.
Is rem toegankelijker dan px?
Voor lettergroottes wel: rem houdt rekening met de standaardlettergrootte van de gebruiker, terwijl lettergroottes in px dat niet doen. Browserzoom werkt met beide eenheden.
Privacy
Omrekeningen en CSS-snippets worden in uw browser verwerkt en nergens naartoe verzonden.