PX ↔ REM ↔ EM ↔ PT Omrekenen
Reken CSS-eenheden in beide richtingen om met een instelbare basisgrootte — px, rem, em en pt worden samen bijgewerkt.
818 weergaven
Hoe het werkt
rem = px ÷ basisgrootte (standaard 16px, dus 24px = 1.5rem); em werkt op dezelfde manier, maar ten opzichte van de geërfde lettergrootte van het element zelf — het veld "contextgrootte" in de omrekenaar; pt is de druk-eenheid, waarbij 1pt = 1,333px (96dpi ÷ 72). Typ in een willekeurig veld en de rest volgt automatisch.
Uitgewerkt voorbeeld: op een basis van 16px wordt een kop van 1.25rem weergegeven op 20px. Nest een label van 0.875em in een component met een eigen lettergrootte van 1.125rem (18px), en het wordt weergegeven op 15,75px — omdat em zich opstapelt ten opzichte van de directe ouder, niet ten opzichte van de basis.
Wat u moet weten
- rem is relatief ten opzichte van het basiselement, niet ten opzichte van een vaste browserstandaard. De aanname van 16px geldt alleen zolang niemand deze heeft aangepast. Als een gebruiker de standaard lettergrootte van zijn browser vergroot via de toegankelijkheidsinstellingen — gebruikelijk bij mensen met een visuele beperking — schaalt elke rem-waarde daar proportioneel mee. Pixelwaarden doen dat niet: een alinea van 16px blijft 16px, ongeacht de browservoorkeur van de gebruiker.
- Daarom raden toegankelijkheidsrichtlijnen rem aan voor lettergrootte en witruimte. Een lay-out die in rem is opgebouwd, respecteert van begin tot eind de door de gebruiker gekozen tekstgrootte — koppen, hoofdtekst en de ruimte eromheen groeien allemaal samen mee, waardoor het ontwerp proportioneel blijft in plaats van te breken wanneer de tekst groter wordt.
- em is relatief ten opzichte van zijn eigen nesting, en dat stapelt op. Een waarde van 1.5em binnen een element dat zelf al 1.5em is, wordt weergegeven op 2,25× de basis — nuttig voor componenten die moeten meeschalen met hun eigen lettergroottecontext (zoals de padding van een knop), riskant voor alles wat meerdere niveaus diep genest is.
- De oude "62,5%-truc" — de basis instellen op 10px zodat 1rem = 10px, voor gemakkelijk hoofdrekenen — werkt nog steeds, maar is beter te vermijden in nieuwe projecten: de meeste componentbibliotheken gaan uit van een basis van 16px, en die overschrijven kan onverwachte afmetingen opleveren in code van derden.
- pt is gedefinieerd ten opzichte van px, niet andersom. CSS legt de verhouding vast op 1in = 96px = 72pt, dus 1pt = 96/72 = precies 1,333px. Dit is vooral van belang bij het exporteren van een ontwerp naar print of PDF, waar pt de native eenheid is — de omrekening houdt schermgroottes en gedrukte groottes consistent.
Veelgestelde vragen
Waarom verschilt mijn em-waarde van rem?
em vermenigvuldigt met de dichtstbijzijnde ingestelde lettergrootte, en dat stapelt op bij nesting: een 1.5em binnen een 1.5em-element is 2,25× de basis. rem verwijst altijd naar de basis — die voorspelbaarheid is de reden waarom rem heeft gewonnen.
Is 1pt echt 1,333px?
In CSS is dat per definitie zo: 1in = 96px = 72pt. Print-PDF's en CSS zijn het over deze verhouding eens, al hangt de fysieke grootte af van de daadwerkelijke DPI van het scherm.
Waarom raden toegankelijkheidsrichtlijnen rem aan boven px voor tekst?
Omdat rem meeschaalt met de lettergrootte-voorkeur van de gebruiker en px niet. Iemand die de standaard tekstgrootte van zijn browser vergroot — een gangbare aanpassing bij slechtziendheid — ziet elke op rem gebaseerde lettergrootte en witruimte proportioneel meegroeien, terwijl op pixels gebaseerde tekst vastzit op de oorspronkelijke grootte — precies het probleem dat toegankelijkheidsaudits signaleren.
Wat gebeurt er met rem-waarden als een gebruiker de standaard lettergrootte van zijn browser wijzigt?
Ze schalen automatisch mee. Als de basis-lettergrootte op de browserstandaard blijft staan en een gebruiker die standaard bijvoorbeeld instelt op 20px in plaats van 16px, staat elke 1rem in uw CSS nu gelijk aan 20px in plaats van 16px — zonder dat er code hoeft te veranderen. Dit werkt alleen als de basis-lettergrootte zelf niet is vastgelegd of relatief is gedefinieerd, niet hardgecodeerd in px.
Moet ik px dan nooit gebruiken?
Jawel, voor dingen die echt nooit met tekst mogen meeschalen: haarlijnranden, iconen met een vaste grootte, of schaduwen van 1px. De praktische vuistregel die de meeste teams hanteren is: rem voor lettergrootte en lay-outruimte, em voor padding ten opzichte van het component, en px alleen voor details die visueel constant moeten blijven, ongeacht de tekstgrootte-instelling van de gebruiker.
Vergelijkbare tools
Probleem melden
PX ↔ REM ↔ EM ↔ PT Omrekenen
Reacties
Nog geen reacties — schrijf de eerste!