Vilka CSS-enheter bör du använda och när?

Question

Accepted Answer

CSS-enheter delas in i **absoluta** (fasta) och **relativa** (skaleras med något). Rätt val är nyckeln till responsiva och tillgängliga layouter.

## Absoluta

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

Använd `px` för saker som inte bör skaleras (kanter, små fasta detaljer).

## Relativa — de viktiga

```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 avgörande skillnaden

```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` **multipliceras** genom nesting (ett barns barn multipliceras), vilket kan spirala oväntad. `rem` refererar alltid till roten, så det är förutsägbart — standarden för teckenstorlekar och avstånd. Använd `em` när du *vill* att storleken är relativ till den lokala typen (t.ex. padding på en knapp som skaleras med dess text).

## Varför relativa enheter är viktiga för tillgänglighet

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

Att använda `rem` för typ respekterar användare som ställer en större standardteckenstorlek — en verklig tillgänglighetsvinst som `px` bryter.

## Varför det är viktigt

Rätt enhet gör layouter responsiva och tillgängliga: `rem` för typ/avstånd (förutsägbar + respekterar användarinställningar), `%`/`vw`/`vh` för flytande layout, `px` för fasta detaljer och `em` för lokalt-relativ storlek.

Nyare viewport-enheter (`dvh`, `svh`) åtgärdar också höjdproblem med mobil-adressfältet.