Jaké CSS jednotky byste měl/a používat a kdy?

Question

Accepted Answer

CSS jednotky se dělí na **absolutní** (pevné) a **relativní** (měnící se s něčím). Správný výběr je klíčový pro responzivní, přístupná rozhraní.

## Absolutní

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

Verejte `px` pro věci, které by se neměly měnit (okraje, malé pevné detaily).

## Relativní — ty důležité

```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 — podstatný rozdíl

```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 **skládá** skrze vnořování (dítě dítěte se násobí), což se může neočekávaně rozvinout. `rem` vždy odkazuje na kořen, takže je předvídatelné — to je pro velikosti písem a odsazení. Použijte `em`, když *chcete* velikost relativní k lokálnímu písmu (např. padding na tlačítku, které se mění s jeho textem).

## Proč jsou relativní jednotky důležité pro přístupnost

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

Verejte `rem` pro text a respektujete uživatele, kteří nastavili větší výchozí písmo — to je opravdové zvýšení přístupnosti, které `px` porušuje.

## Proč na tom záleží

Správrná jednotka dělá rozhraní responzivní a přístupné: `rem` pro text/odsazení (předvídatelné + respektuje uživatelská nastavení), `%`/`vw`/`vh` pro plynulé rozhraní, `px` pro pevné detaily a `em` pro lokálně-relativní velikost.

Novější viewport jednotky (`dvh`, `svh`) také řeší problémy s výškou adresního řádku na mobilech.