CSS-enheter
Skriv ett värde och välj enhet, så visas samma storlek i alla CSS-enheter, redo att kopiera.
Samma storlek i andra enheter
- 1.5remrotens teckenstorlek
- 1.5emförälderns teckenstorlek
- 150%procent av förälderns teckenstorlek
- 18ptpunkter
- 1.5pcpica
- 0.25intum
- 0.635cmcentimeter
- 6.35mmmillimeter
- 25.4Qkvartsmillimeter
- 1.6667vwprocent av fönstrets bredd
- 2.6667vhprocent av fönstrets höjd
- 2.6667vminprocent av fönstrets kortare sida
- 1.6667vmaxprocent av fönstrets längre sida
Sammanhang
Px till rem vid 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 |
En punkt räknas som 1,333 px, eftersom en tum är 96 px och 72 pt. Omvänt är en pixel 0,75 pt.
Så fungerar det
Rem utgår från teckenstorleken på html-elementet, som är 16 px i alla webbläsare om ingen ändrar den. 24 px blir alltså 1,5 rem, och den som sätter html { font-size: 62.5% } får 10 px per rem och enklare huvudräkning, men ändrar samtidigt allt som bygger på standardstorleken.
Em utgår från förälderns teckenstorlek och växer därför när element ligger i varandra: 1,2 em inuti 1,2 em blir 1,44 gånger så stort. Procent för font-size fungerar likadant, där 100 % är 1 em. Procent för bredd eller marginaler utgår i stället från föräldraelementets bredd och räknas inte om här.
Rem är det vanliga valet för teckenstorlekar och avstånd, eftersom sidan då följer den storlek besökaren valt i webbläsaren. Px i teckenstorlekar hindrar inte zoomning men bortser från den inställningen, vilket WCAG:s riktlinjer om textstorlek tar upp.
Vw och vh är en procent av fönstrets bredd och höjd, och vmin och vmax av den kortare respektive längre sidan. Värdena beror helt på fönstret, så knappen hämtar storleken på det fönster du använder nu. På mobiler kan vh ändras när adressfältet visas; dvh, svh och lvh löser det.
Pt, pc, in, cm, mm och Q är absoluta enheter med fasta förhållanden i CSS: en tum är 96 px, 72 pt och 2,54 cm. På skärm betyder det sällan verkliga centimeter, eftersom en CSS-pixel inte är en fysisk pixel. De är mest användbara i utskriftsstilar.
Värdena skrivs med punkt och högst fyra decimaler, som CSS kräver.