Ποιες CSS units θα πρέπει να χρησιμοποιήσεις και πότε;

Question

Accepted Answer

Οι CSS units χωρίζονται σε **απόλυτες** (fixed) και **σχετικές** (scale με κάτι). Η σωστή επιλογή είναι κλειδί για responsive και accessible layouts.

## Absolute

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

Χρησιμοποίησε `px` για πράγματα που δεν θα πρέπει να αλλάξουν (borders, μικρές fixed λεπτομέρειες).

## Relative — τα σημαντικά

```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 — η κρίσιμη διαφορά

```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` **συσσωρεύεται** μέσω nesting (ένα παιδί ενός παιδιού πολλαπλασιάζεται), που μπορεί να ξεφύγει απροσδόκητα. Το `rem` πάντα αναφέρεται στη ρίζα, οπότε είναι προβλέψιμο — η δήλωση επιλογή για font sizes και spacing. Χρησιμοποίησε `em` όταν *θέλεις* sizing σχετικά με το τοπικό font (π.χ. padding σε ένα button που κλιμακώνεται με το κείμενό του).

## Γιατί οι relative units είναι σημαντικές για την accessibility

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

Η χρήση `rem` για type σέβεται τους χρήστες που ορίζουν ένα μεγαλύτερο default font — ένα πραγματικό accessibility κέρδος που το `px` σπάει.

## Γιατί έχει σημασία

Η σωστή unit κάνει τα layouts responsive και accessible: `rem` για type/spacing (predictable + σέβεται τις ρυθμίσεις του χρήστη), `%`/`vw`/`vh` για fluid layout, `px` για fixed λεπτομέρειες, και `em` για locally-relative sizing.

Νεότερες viewport units (`dvh`, `svh`) επιλύουν επίσης τα ζητήματα του mobile address-bar height.