რა CSS ერთეულები უნდა გამოიყენო და როდის?

Question

Accepted Answer

CSS ერთეულები იყოფა **აბსოლუტურ** (ფიქსირებული) და **ფარდობით** (მასშტაბირება რაღაცით). სწორი არჩევანი აუცილებელია რესპონსიულ და ხელმისაწვდომ განლაგებისთვის.

## აბსოლუტური

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

შეიყენე `px` რაც არ უნდა მასშტაბირდეს (საზღვრები, მცირე ფიქსირებული დეტალები).

## ფარდობითი — მნიშვნელოვანი

```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` **დაგროვდება** ჩასმის მাშინ (შვილის შვილი მრავლდება), რაც შეიძლება უოცნებოდ გაშტყდეს. `rem` ყოველთვის მიმართავს ფესვს, ამიტომ იგი პროგნოზირებადია — სტანდარტული არჩევანი შრიფტის ზომებისა და მანძილისთვის. გამოიყენე `em` როდესაც *გინდა* ზომა ლოკალური შრიფტის მიმართ (მაგ. ღილაკის პადინგი რაც მის ტექსტთან მასშტაბირდება).

## რატომ არის ფარდობითი ერთეულები მნიშვნელოვანი ხელმისაწვდომობისთვის

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

`rem` გამოყენება ტიპისთვის პატივს სცემს მომხმარებლებს, რომლებიც დიდ ნაგულისხმევ შრიფტს დაყენებენ — რეალური ხელმისაწვდომობის მოგება, რომელსაც `px` აფუჭებს.

## რატომ არის ეს მნიშვნელოვანი

სწორი ერთეული კეთდის განლაგებებს რესპონსიულ და ხელმისაწვდომ: `rem` ტიპისა და მანძილისთვის (პროგნოზირებადი + პატივი სცემს მომხმარებელთა პარამეტრებს), `%`/`vw`/`vh` სითხე განლაგებისთვის, `px` ფიქსირებული დეტალებისთვის, და `em` ლოკალური ფარდობითი ზომისთვის.

ახალი viewport ერთეულები (`dvh`, `svh`) ასევე ააქეთ მობილური address-bar სიმაღლის პრობლემებს.