CSS-enheder
Skriv en værdi, og vælg enhed, så vises samme størrelse i alle CSS-enheder, klar til at kopiere.
Samme størrelse i andre enheder
- 1.5remrodens skriftstørrelse
- 1.5emforælderens skriftstørrelse
- 150%procent af forælderens skriftstørrelse
- 18ptpunkter
- 1.5pcpica
- 0.25intommer
- 0.635cmcentimeter
- 6.35mmmillimeter
- 25.4Qkvartmillimeter
- 1.6667vwprocent af vinduets bredde
- 2.6667vhprocent af vinduets højde
- 2.6667vminprocent af vinduets korteste side
- 1.6667vmaxprocent af vinduets længste side
Kontekst
Px til rem ved 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 |
Et punkt regnes som 1,333 px, fordi en tomme er 96 px og 72 pt. Den anden vej er én pixel 0,75 pt.
Sådan virker det
Rem tager udgangspunkt i skriftstørrelsen på html-elementet, som er 16 px i alle browsere, medmindre nogen ændrer den. 24 px bliver altså 1,5 rem, og den, der sætter html { font-size: 62.5% }, får 10 px per rem og nemmere hovedregning, men ændrer samtidig alt, hvad der bygger på standardstørrelsen.
Em tager udgangspunkt i forælderens skriftstørrelse og vokser derfor, når elementer ligger inden i hinanden: 1,2 em inden i 1,2 em bliver 1,44 gange så stort. Procent for font-size fungerer på samme måde, hvor 100 % svarer til 1 em. Procent for bredde eller margener tager i stedet udgangspunkt i den omsluttende blok og omregnes ikke her.
Rem er det almindelige valg til skriftstørrelser og afstande, fordi siden så følger den størrelse, den besøgende har valgt i browseren. Px i skriftstørrelser forhindrer ikke zoom, men ser bort fra den indstilling, hvilket WCAG’s retningslinjer om tekststørrelse behandler.
Vw og vh er én procent af vinduets bredde og højde, og vmin og vmax af den korteste og længste side. Værdierne afhænger helt af vinduet, så knappen henter størrelsen på det vindue, du bruger nu. På mobiler kan vh ændre sig, når adresselinjen vises; dvh, svh og lvh løser det.
Pt, pc, in, cm, mm og Q er absolutte enheder med faste forhold i CSS: en tomme er 96 px, 72 pt og 2,54 cm. På skærm betyder det sjældent rigtige centimeter, fordi en CSS-pixel ikke er en fysisk pixel. De er mest nyttige i stylesheets til udskrift.
Værdierne skrives med punktum og højst fire decimaler, som CSS kræver.