px en em omrekenen
Bij het definiëren van bijvoorbeeld de tekstgrootte in CSS worden vaak pixels en em's gebruikt. In de items Afmetingen van letters en toepassing met CSS en Over eenheden in CSS wordt daar het een en ander over geschreven.
Het verschil tussen px en em is dat px een absolute eenheid is en dat em relatief is ten opzichte van een zekere "standaard".
Een andere manier om de grootte van tekst, afbeelding of ander element weer te geven is in een percentage. Dat is nauw verbonden met em. Daarom wordt het verband tussen px, em en % hier ook behandeld.
Uiteindelijk worden em en % omgerekend naar px, anders krijg je het niet op het scherm. Het moet wel duidelijk hoeveel px één em ( = 100%) is. Gewoonlijk is dat 16px. Afwijkingen van die regel vind je eigenlijk alleen nog bij heel oude browsers.
| px | em | percent | ||
| 5px | 0.3125em | 31.25% | ||
| 6px | 0.3750em | 37.50% | ||
| 7px | 0.4375em | 43.75% | ||
| 8px | 0.5000em | 50.00% | ||
| 9px | 0.5625em | 56.25% | ||
| 10px | 0.6250em | 62.50% | ||
| 11px | 0.6875em | 68.75% | ||
| 12px | 0.7500em | 75.00% | ||
| 13px | 0.8125em | 81.25% | ||
| 14px | 0.8750em | 87.50% | ||
| 15px | 0.9375em | 93.75% | ||
| 16px | 1.0000em | 100.00% | ||
| 17px | 1.0625em | 106.25% | ||
| 18px | 1.1250em | 112.50% | ||
| 19px | 1.1875em | 118.75% | ||
| 20px | 1.2500em | 125.00% | ||
| 21px | 1.3125em | 131.25% | ||
| 22px | 1.3750em | 137.50% | ||
| 23px | 1.4375em | 143.75% | ||
| 24px | 1.5000em | 150.00% | ||
| 25px | 1.5625em | 156.25% |
De tabel rechts toont het verband tussen em, % en px, als 1em = 100% = 16px. Voor andere verhoudingen kun je de rekenhulp gebruiken. Klik op de knop hier onder.
De manier van rekenen is eenvoudig:
- Van px naar em
- em = aantal pixels ÷ default pixels.
Voorbeeld: 5px = 0.3125em:
5 ÷ 16 = 0.3125
- Van em naar px
- px = em × default pixels.
Voorbeeld: 0.625em = 10px:
0.625 × 16 = 10
- Van em naar %
- Vermenigvuldig em met 100.
Voorbeeld: 0.75em = 75%:
0.75 × 100 = 75
- Van % naar em
- Deel % door 100.
Voorbeeld: 50% = 0.5em:
50 ÷ 100 = 0.5
- Van px naar %
- Reken px om naar em, daarna naar %.
- Van % naar px
- Reken % om naar em, daarna naar px.
Bron: w3schools.com
