PX ↔ REM ↔ EM ↔ PT Omrekenen
Reken CSS-eenheden in beide richtingen om met een instelbare basisgrootte — px, rem, em en pt worden samen bijgewerkt.
532 weergaven
Hoe de eenheden met elkaar samenhangen
rem = px ÷ basisgrootte (standaard 16 px, dus 24 px = 1.5rem); em werkt hetzelfde maar ten opzichte van de overgeërfde lettergrootte van het element — het veld "contextgrootte" in de tool; pt is de druk-eenheid met 1pt = 1,333px (96dpi ÷ 72). Typ in een willekeurig veld en de rest volgt.
Praktische vuistregel: gebruik rem voor lettergroottes en marges zodat de lettergrootte-voorkeur van de gebruiker de lay-out schaalt; em voor padding die moet meeschalen met de tekst van het component; px alleen voor dingen die nooit mogen schalen (haarlijn-randen). De basis op 10 px zetten (het oude 62,5%-trucje) maakt hoofdrekenen makkelijker, maar is in nieuwe projecten beter te vermijden — componentbibliotheken gaan uit van 16.
Veelgestelde vragen
Waarom verschilt mijn em-waarde van rem?
em vermenigvuldigt met de dichtstbijzijnde ingestelde lettergrootte en stapelt zich op: een 1.5em binnen een 1.5em-element is 2,25× de basis. rem verwijst altijd naar de basis — die voorspelbaarheid is waarom het won.
Is 1pt echt 1,333px?
In CSS, ja per definitie: 1in = 96px = 72pt. Print-PDF's en CSS zijn het over deze verhouding eens, al hangt de fysieke grootte af van de werkelijke schermresolutie (DPI).
Vergelijkbare tools
Probleem melden
PX ↔ REM ↔ EM ↔ PT Omrekenen