Quais unidades CSS você deve usar e quando?

Question

Accepted Answer

Unidades CSS se dividem em **absolutas** (fixas) e **relativas** (escalam com algo). Escolher bem é essencial para layouts responsivos e acessíveis.

## Absolutas

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

Use `px` para coisas que não devem escalar (bordas, pequenos detalhes fixos).

## Relativas — as importantes

```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 — a distinção crucial

```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` se **compõe** por aninhamento (um filho de um filho se multiplica), o que pode espiralar inesperadamente. `rem` sempre referencia a raiz, então é previsível — a escolha padrão para tamanhos de fonte e espaçamento. Use `em` quando você *quer* dimensionamento relativo à fonte local (ex. padding em um botão que escala com seu texto).

## Por que unidades relativas importam para acessibilidade

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

Usar `rem` para tipografia respeita usuários que definem uma fonte padrão maior — um ganho real de acessibilidade que `px` quebra.

## Por que isso importa

A unidade certa torna layouts responsivos e acessíveis: `rem` para tipografia/espaçamento (previsível + respeita configurações do usuário), `%`/`vw`/`vh` para layout fluido, `px` para detalhes fixos, e `em` para dimensionamento relativo local.

Unidades viewport mais novas (`dvh`, `svh`) também corrigem problemas com a altura da barra de endereços móvel.