Koje CSS jedinice trebate koristiti i kada?

Question

Accepted Answer

CSS jedinice se dijele na **apsolutne** (fiksne) i **relativne** (skaliraju se s nečim). Dobar odabir je ključan za responzivne i pristupačne raspored.

## Apsolutne

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

Koristite `px` za stvari koje se ne bi trebale skalirati (okviri, mali fiksni detalji).

## Relativne — važne

```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 naspram em — ključna razlika

```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 **složuje** kroz ugniježđenje (dijete djeteta se množi), što može spiralno porasti. `rem` uvijek referencira korijen, pa je predvidljiv — pravi izbor za veličine fonta i razmake. Koristite `em` kada *želite* veličinu relativnu prema lokalnom fontu (npr. ispuna na gumbu koja se skalira s tekstom).

## Zašto relativne jedinice važu za pristupačnost

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

Koristenje `rem` za tip poštuje korisnike koji su postavili veći zadanu veličinu fonta — pravi dobitak u pristupačnosti koji `px` prekida.

## Zašto je važno

Prava jedinica čini raspored responzivnim i pristupačnim: `rem` za tip/razmake (predvidljivo + poštuje korisničke postavke), `%`/`vw`/`vh` za fluidni raspored, `px` za fiksne detalje, i `em` za lokalno-relativnu veličinu.

Novije viewport jedinice (`dvh`, `svh`) također ispravljaju probleme visine adresne trake mobitela.