Hvilke CSS-enheder bør du bruge, og hvornår?

Question

Accepted Answer

CSS-enheder opdeles i **absolutte** (faste) og **relative** (skaleres med noget). At vælge korrekt er nøglen til responsive, tilgængelige layouts.

## Absolute

```css
.x { width: 100px; }  /* px — fixed pixels; predictable, doesn't scale */
```

Brug `px` til ting, der ikke bør skaleres (grænser, små faste detaljer).

## Relative — de vigtige

```css
font-size: 1.5rem;  /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em;   /* em — relative to the PARENT's font-size. Compounds! */
width: 50%;         /* % — relative to the parent's size */
width: 50vw;        /* vw — 50% of viewport WIDTH */
height: 100vh;      /* vh — 100% of viewport HEIGHT */
```

## rem vs em — den afgørende forskel

```css
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em;  } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
```

`em` **sammensætter** gennem nesting (et barns barn multiplicerer), hvilket kan blive uventet. `rem` refererer altid til roden, så det er forudsigeligt — det vigtigste valg for skriftstørrelser og mellemrum. Brug `em`, når du *ønsker* størrelse relativ til det lokale skrifttype (f.eks. padding på en knap, der skaleres med dens tekst).

## Hvorfor relative enheder betyder noget for tilgængelighed

```css
font-size: 16px;   /* ❌ ignores the user's browser font-size preference */
font-size: 1rem;   /* ✅ scales when the user increases their default size */
```

Brug af `rem` til type respekterer brugere, der har indstillet en større standardskrift — en rigtig gevinst for tilgængelighed, som `px` ødelægger.

## Hvorfor det betyder noget

Den rigtige enhed gør layouts responsive og tilgængelige: `rem` til type/mellemrum (forudsigeligt + respekterer brugerindstillinger), `%`/`vw`/`vh` til flydende layout, `px` til faste detaljer, og `em` til lokalt-relativ størrelse.

Nyere viewport-enheder (`dvh`, `svh`) løser også problemer med mobilens adressebar-højde.