De PX-naar-REM-converter, voert deze deling uit. Het veld voor de basisgrootte begint op 16, maar leest je stylesheet niet. Controleer de basis voordat je een lettergrootte of tussenruimte omrekent.
De lettergrootte van het root-element vinden
Eén rem verwijst naar de lettergrootte van het root-element, meestal html. Een waarde van 16 px komt vaak voor, maar is niet universeel: de stijlen van de site en de browservoorkeuren kunnen die veranderen. MDN legt de referentie van de eenheid rem uit, in het Engels.
- Open de pagina van je project in de browser. Inspecteer het html-element met de ontwikkelaarstools.
- Zoek font-size in het paneel met berekende stijlen en noteer de waarde in pixels. Gebruik niet de waarde van body of van de kop die je wilt omrekenen.
- Je kunt ook getComputedStyle(document.documentElement).fontSize uitvoeren in de console op diezelfde pagina. Een resultaat van “20px” betekent dat je 20 als basis moet gebruiken in de converter.
- Controleer de waarde opnieuw als een responsieve regel of instelling de basisgrootte verandert. De meting beschrijft de pagina in de huidige toestand.
Deze methode gebruikt de daadwerkelijk toegepaste stijlen, zoals uitgelegd in de Engelstalige documentatie van getComputedStyle.
De waarde omrekenen en toepassen
- Voer 24 in bij “CSS-pixelwaarde”, zonder px toe te voegen.
- Voer de gemeten basis in, bijvoorbeeld 16. De basis moet strikt positief zijn; de om te rekenen waarde mag nul zijn, maar niet negatief.
- Start de conversie. De tool toont “24px ÷ 16px = 1.5rem”. Gebruik voor een CSS-declaratie alleen 1.5rem, bijvoorbeeld “font-size: 1.5rem;”.
- Controleer het resultaat op je pagina. Is de basisgrootte 20 px, gebruik dan 1.2rem om 24 px te krijgen. Met 1.5rem zou je dan 30 px krijgen.
CSS vereist een decimale punt: schrijf 1.5rem, niet 1,5rem, ook als je lokale getalnotatie een komma gebruikt. De pixels in deze conversie zijn CSS-pixels, niet de fysieke pixels van het scherm. Pas geen vermenigvuldigingsfactor toe op basis van de pixeldichtheid. MDN legt dit onderscheid uit, in het Engels.
Het verschil tussen rem en em begrijpen
Met rem-eenheden delen componenten een gemeenschappelijke referentie. Em-eenheden volgen de lettergrootte van het element; in een font-size-declaratie volgen ze die van het bovenliggende element. Tekstgroottes in em kunnen zich daardoor vermenigvuldigen bij geneste elementen. Kies em als je deze afhankelijkheid van de component wilt, of rem als je een verwijzing naar het root-element wilt. De module CSS Values and Units, in het Engels, definieert deze eenheden.
Fouten met de basis en precisie voorkomen
Verander de lettergrootte van het root-element niet alleen om een berekening te laten kloppen: daarmee verander je ook bestaande afmetingen in rem. Corrigeer de ingevoerde basis en reken opnieuw.
Het resultaat wordt afgerond op maximaal zes decimalen. Zo levert 17 px bij een basisgrootte van 18 px 0.944444rem op. Overbodige nullen aan het einde blijven niet staan.
Een heel kleine waarde kan uit de weergave verdwijnen: 0.000001 px ÷ 16 levert na afronding 0rem op. Dat betekent niet dat het wiskundige quotiënt nul is. Controleer dit voordat je een heel kleine waarde in je CSS vervangt. Niet-eindige getallen en resultaten buiten het ondersteunde getalbereik worden geweigerd.
Controleer ook tekstvergroting
Het gebruik van rem garandeert geen toegankelijkheid. Test zoom tot 200%, samen met tekstvergroting en lettertypevoorkeuren: koppen, knoppen en velden moeten leesbaar en bruikbaar blijven. Let op afgesneden of overlappende tekst in containers met vaste afmetingen. Een afmeting in px is niet automatisch ontoegankelijk: het zoomen van de hele pagina vergroot die ook. WCAG-criterium 1.4.4, in het Engels, gaat over vergroten zonder verlies van inhoud of functionaliteit, niet over verplicht gebruik van een bepaalde eenheid.
Veelgestelde vragen
Hoeveel rem is 16 px?
1rem bij een basisgrootte van 16 px; 0.8rem bij een basisgrootte van 20 px. Je moet de basis kennen om dat te kunnen zeggen.
Moet ik elke px-waarde naar rem omrekenen?
Nee. Kies de eenheid voor het gewenste gedrag: de typografie van het root-element volgen, die van de component volgen of een CSS-lengte behouden die onafhankelijk is van het lettertype.
Waarom verschilt mijn resultaat van dat van de converter?
Controleer de berekende lettergrootte van html, eventuele CSS-regels die je declaratie overschrijven en de afronding. De converter rekent alleen met de twee opgegeven waarden.