Cilat njësi CSS duhet të përdorni dhe kur?

Question

Accepted Answer

Njësitë CSS ndahen në **absolute** (fikse) dhe **relative** (shkallëzohen me diçka). Zgjedhja e duhur është kyçe për paraqitje përgjigjes dhe të arritshme.

## Absolute

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

Përdorni `px` për gjëra që nuk duhet të shkallëzohen (kufijtë, detajet e vogla fikse).

## Relative — ato të rëndësishmet

```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 — dallimi kritik

```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` **përbëhet** përmes nesting-ut (fëmijë i fëmijës shumëzohet), që mund të spiralizojë papritur. `rem` gjithmonë referencon rrënjën, kështu që është i parashikueshëm — standard për madhësinë e fontit dhe hapësirat. Përdorni `em` kur *dëshironi* që madhësia të jetë relative ndaj fontit lokal (p.sh. mbushja në një buton që shkallëzohet me tekstin e tij).

## Pse njësitë relative janë të rëndësishme për arritshëmërinë

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

Përdorimi i `rem` për llojin respekton përdoruesit që vendosin një font të paracaktuar më të madh — një fitim i vërtetë i arritshëmërisë që `px` thyhet.

## Pse është e rëndësishme

Njësia e duhur bën paraqitjet përgjigjes dhe të arritshme: `rem` për tip/hapësira (i parashikueshëm + respekton cilësimet e përdoruesit), `%`/`vw`/`vh` për paraqitje të rrjedhshme, `px` për detajet fikse dhe `em` për madhësi lokalisht-relative.

Njësitë më të reja të viewport (`dvh`, `svh`) gjithashtu rregullojnë problemet e lartësisë së shiritit të adresave celular.