तुम्हाले कोन CSS युनिट्स वापरायचे आहे आणि केव्हा?

Question

Accepted Answer

CSS युनिट्स **absolute** (स्थिर) आणि **relative** (काहीतरी सह स्केल होणारे) मध्ये विभागलेले आहेत. योग्य निवड responsive आणि accessible layouts साठी महत्त्वाची आहे.

## Absolute

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

`px` असा वापर करा जे स्केल होऊ नये (borders, लहान निश्चित तपशील).

## 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` नेहमी root ला संदर्भित करते, म्हणून हे अचूक आहे — font sizes आणि spacing साठी मानक निवड. `em` तेव्हा वापरा जेव्हा तुम्हाला local font सापेक्ष sizing *हवी* असेल (उदा. button padding जे तिच्या text सह स्केल होते).

## Accessibility साठी relative units महत्त्वाचे का आहेत

```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 साठी वापरणे त्या users च्या आदरास करते जे मोठे default font सेट करतात — एक खरी accessibility जीत जी `px` तोडते.

## ते महत्त्वाचे का आहे

योग्य unit layouts को responsive आणि accessible बनवते: `rem` type/spacing साठी (अचूक + user settings चा आदर), `%`/`vw`/`vh` fluid layout साठी, `px` निश्चित तपशीलांसाठी, आणि `em` locally-relative sizing साठी.

नवीन viewport units (`dvh`, `svh`) mobile address-bar height समस्या देखील सोडवते.