Zo werkt het
- Vul bij Root-lettergrootte de lettergrootte van je html-element in pixels in.
- Open het tabblad CSS en plak je CSS-code.
- Kies bij Richting voor px → rem of rem → px.
- Stel Precisie in op het gewenste aantal decimalen.
Voorbeelden
Alleen de typografie van een artikel omrekenen
.artikel {
font-size: 18px;
line-height: 28px;
padding: 24px;
}.artikel {
font-size: 1.125rem;
line-height: 1.75rem;
padding: 24px;
}Afstanden in een productoverzicht terugrekenen naar px
.producten {
gap: 0.75rem 2rem;
padding: 1.5rem;
}.producten {
gap: 12px 32px;
padding: 24px;
}Tips
- Maak het omgerekende bestand netjes op met de CSS Formatter.
- Maak het kleiner met de CSS Minifier.
Veelgestelde vragen
Hoeveel pixels is 1 rem?
Bij een root-lettergrootte van 16px is 1rem gelijk aan 16px. Je rekent px naar rem door de pixelwaarde te delen door de root-lettergrootte; terugrekenen doe je door te vermenigvuldigen.
Wat is het verschil tussen rem en em in deze tool?
Voor rem gebruikt de tool Root-lettergrootte; voor em gebruikt hij Lettergrootte ouderelement (voor em). Losse waarden kun je tussen px, rem en em omrekenen, maar em-waarden in CSS worden niet aangepast.
Waarom blijft mijn rand van 1px ongewijzigd?
Met 1px behouden ingeschakeld blijven bij px → rem alle niet-nulwaarden van −1px tot en met 1px in pixels staan. Schakel deze optie uit als je die waarden ook wilt omrekenen.
Worden breakpoints in media queries ook omgerekend?
Alleen als je Media queries omrekenen inschakelt; dit geldt ook voor @container. Let op: rem in media queries gebruikt de standaardlettergrootte van de browser, niet de root-lettergrootte van je pagina.
Wordt mijn CSS geüpload of opgeslagen?
De berekeningen gebeuren in je browser; de tool verstuurt je waarden en CSS niet en slaat ze niet op. Alleen instellingen, het laatst gekozen tabblad en de koppeling tussen de twee lettergroottes worden lokaal bewaard. De site gebruikt Google Analytics voor gebruiksgebeurtenissen, zonder je waarden of CSS mee te sturen.