CSS-eenheden
Vul een waarde in en kies de eenheid om dezelfde grootte in alle CSS-eenheden te zien, klaar om te kopiëren.
Dezelfde grootte in andere eenheden
- 1.5remroot-lettergrootte
- 1.5emlettergrootte van het ouderelement
- 150%procent van de lettergrootte van het ouderelement
- 18ptpunten
- 1.5pcpica’s
- 0.25ininches
- 0.635cmcentimeters
- 6.35mmmillimeters
- 25.4Qkwartmillimeters
- 1.6667vwprocent van de breedte van de viewport
- 2.6667vhprocent van de hoogte van de viewport
- 2.6667vminprocent van de kortere zijde van de viewport
- 1.6667vmaxprocent van de langere zijde van de viewport
Context
Px naar rem bij 16 px
| px | rem | pt |
|---|---|---|
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 64px | 4rem | 48pt |
Eén punt telt als 1,333 px, omdat een inch 96 px en 72 pt is. Omgekeerd is één pixel 0,75 pt.
Zo werkt het
Rem gaat uit van de lettergrootte van het html-element, die in alle browsers 16 px is zolang niemand die aanpast. 24 px is dus 1,5 rem. Wie html { font-size: 62.5% } instelt, krijgt 10 px per rem en makkelijker hoofdrekenen, maar verandert ook alles wat op de standaardgrootte voortbouwt.
Em gaat uit van de lettergrootte van het ouderelement en stapelt zich daardoor op bij geneste elementen: 1,2 em binnen 1,2 em is 1,44 keer zo groot. Procent bij font-size werkt net zo, waarbij 100% gelijk is aan 1 em. Procent bij breedtes of marges gaat juist uit van het omvattende blok en wordt hier niet omgerekend.
Rem is de gebruikelijke keuze voor lettergroottes en afstanden, omdat de pagina dan de grootte volgt die de bezoeker in de browser heeft gekozen. Px in lettergroottes houdt zoomen niet tegen, maar negeert die instelling, waar de WCAG-richtlijnen over het vergroten van tekst op ingaan.
Vw en vh zijn een procent van de breedte en hoogte van de viewport, en vmin en vmax van de kortere en langere zijde. De waarden hangen volledig af van het venster, dus de knop neemt de grootte over van het venster dat je nu gebruikt. Op telefoons kan vh veranderen als de adresbalk verschijnt; dvh, svh en lvh lossen dat op.
Pt, pc, in, cm, mm en Q zijn absolute eenheden met vaste verhoudingen in CSS: een inch is 96 px, 72 pt en 2,54 cm. Op een scherm betekent dat zelden echte centimeters, omdat een CSS-pixel geen fysieke pixel is. Ze zijn vooral nuttig in stylesheets voor print.
Waarden worden geschreven met een decimale punt en maximaal vier decimalen, zoals CSS vereist.