Två huvudkategorier
CSS-enheter delas in i absoluta (fasta, oberoende av kontext) och relativa (anpassar sig efter föräldraelement, typsnitt eller viewport).
Alltid samma fysiska storlek oavsett sammanhang.
px
mm
cm
in
pt
pc
Beror på typsnitt, förälder eller viewport.
em
rem
%
vw
vh
vmin
vmax
ch
ex
Pixel px
Den vanligaste enheten. 1 px = 1/96 tum. På skärmar med hög DPI (retina) kan 1 CSS-px motsvara flera fysiska pixlar, men CSS-pixeln är alltid lika stor visuellt.
/* Alltid exakt samma visuella storlek */
Fysiska enheter mm cm in pt
Baserade på verkliga fysiska mått. Obs: På skärmar matchar de sällan exakt pga. olika pixeldensitet. Främst användbara vid utskrift.
width: 1in; /* 1 tum */
width: 2.54cm; /* 2.54 centimeter */
width: 25.4mm; /* 25.4 millimeter */
width: 72pt; /* 72 punkter */
width: 96px; /* 96 pixlar */
| Enhet | Motsvarar | Användning |
|---|---|---|
1mm | ≈ 3.78px | Utskrift |
1cm | = 10mm ≈ 37.8px | Utskrift |
1in | = 2.54cm = 96px | Utskrift |
1pt | = 1/72 tum ≈ 1.33px | Typografi / utskrift |
1pc | = 12pt = 16px | Traditionell typografi |
@media print stylesheet, men föredra px, rem och % på skärm.
Em em
Relativ till förälderns font-size. 1em = förälderelementets textstorlek. Ems "kaskaderar" — de multipliceras vid nästling.
Förälder: font-size: 16px
width: 10em; /* = 10 × 16 = 160px */
width: 5em; /* = 5 × 16 = 80px */
width: 2.5em; /* = 2.5 × 16 = 40px */
/* Detta gör em oförutsägbar vid djup nästling */
/* Lösning: använd rem istället! */
Root Em rem
Alltid relativ till rot-elementets (<html>) font-size. Standardvärde i webbläsare: 16px. Ingen kaskadeffekt — förutsägbart och konsekvent.
html: font-size: 16px
font-size: 1rem; /* = 16px */
padding: 1.5rem; /* = 24px */
margin: 0.75rem; /* = 12px */
Procent %
Relativ till förälderns storlek. width: 50% = halva förälderns bredd. Vad % refererar till beror på egenskapen — bredd, höjd, font-size och padding har alla olika referenspunkt.
| Egenskap | % refererar till |
|---|---|
width | Förälderns bredd |
height | Förälderns höjd (kräver att föräldern har en definierad höjd) |
font-size | Förälderns font-size |
padding | Förälderns bredd (även top/bottom!) |
margin | Förälderns bredd |
line-height | Elementets font-size |
Viewport-enheter vw vh
1vw = 1% av viewportens bredd. 1vh = 1% av viewportens höjd. Perfekt för fullskärmslayouter och responsiv typografi.
width: 100vw; /* hela fönstrets bredd */
height: 100vh; /* hela fönstrets höjd */
/* Responsiv typografi */
font-size: 5vw; /* växer med fönstret */
Jag skalar!
font-size: 5vw
100vh inkludera utrymme under adressfältet. Använd 100dvh (dynamic viewport height) för mer pålitligt resultat i moderna webbläsare.
Minsta & Största vmin vmax
1vmin = 1% av den minsta dimensionen (bredd eller höjd). 1vmax = 1% av den största. Nyttigt för element som ska se bra ut i både landskap och porträtt.
vmin = | vmax =
width: 30vmin;
height: 30vmin;
/* Fönster 1200×800: vmin baseras på 800 (höjd) */
/* Fönster 600×900: vmin baseras på 600 (bredd) */
Teckenbaserade ch ex
1ch = bredden av tecknet "0" i aktuellt typsnitt. 1ex = höjden av bokstaven "x". Perfekt för att styra textbredd och typografisk vertikal rytm.
max-width: 65ch;
vertical-align: -0.5ex;
Smarta funktioner calc clamp min max
Moderna CSS-funktioner låter dig kombinera enheter, sätta gränser och skapa responsiva värden utan media queries.
width: calc(100% - 80px);
font-size: calc(1rem + 0.5vw);
height: calc(100vh - 60px);
Jag är clamp(1rem, 3vw, 2.5rem)
Aldrig mindre än 1rem, aldrig större än 2.5rem
font-size: clamp(1rem, 3vw, 2.5rem);
/* Responsiv bredd med gränser */
width: clamp(300px, 50%, 800px);
width: min(400px, 80%); /* aldrig bredare än 400px */
/* max() — väljer det största värdet */
width: max(200px, 30%); /* aldrig smalare än 200px */
Vilken enhet ska jag använda?
En snabbguide för att välja rätt enhet i rätt situation.
| Situation | Rekommendation | Varför |
|---|---|---|
| Font-storlek | rem | Respekterar användarens webbläsarinställning |
| Spacing (margin/padding) | rem eller em | Skalar proportionellt med texten |
| Radbredd för text | ch | 45–75ch ger optimal läsbarhet |
| Bredd på containers | % + max-width i px/rem | Flexibelt med ett tak |
| Fullskärmslayout | vh / dvh | Fyller viewporten exakt |
| Responsiv typografi | clamp(rem, vw, rem) | Skalas smidigt med gränser |
| Borders & skuggor | px | Ska inte ändras med textstorlek |
| Ikoner | em | Matchar omgivande text automatiskt |
| Utskrift | mm / cm / pt | Fysiska mått för papper |
rem som bas, % för layout, px för detaljer, och clamp() för att göra allt responsivt. Undvik em utom för komponenter som ska skala relativt sin kontext.
Reklam