آپ کو کون سی CSS اکائیں استعمال کرنی چاہئیں اور کب؟

Question

Accepted Answer

CSS اکائیں **مطلق** (fixed) اور **نسبتی** (جو کسی چیز کے ساتھ scale ہوں) میں تقسیم ہوتی ہیں۔ اچھی طریقے سے منتخب کرنا responsive، قابل رسائی layouts کے لیے اہم ہے۔

## مطلق

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

ان چیزوں کے لیے `px` استعمال کریں جو scale نہیں ہونی چاہئیں (borders، چھوٹی fixed تفصیلات)۔

## نسبتی — اہم اکائیں

```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 بمقابلہ 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` **compound** ہوتا ہے nesting کے ذریعے (ایک child کا child ضرب لگاتا ہے)، جو غیر متوقع طریقے سے بڑھ سکتا ہے۔ `rem` ہمیشہ root کو reference کرتا ہے، تو یہ predictable ہے — font sizes اور spacing کے لیے بہترین۔ `em` استعمال کریں جب آپ *چاہتے* ہوں sizing local font کے نسبت (مثلاً button پر padding جو اس کے text کے ساتھ scale ہو)۔

## نسبتی اکائیں رسائی کے لیے کیوں اہم ہیں

```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 سیٹ کرتے ہیں — یہ حقیقی رسائی کا فائدہ ہے جو `px` کو توڑتا ہے۔

## یہ کیوں اہم ہے

صحیح اکائی layouts کو responsive اور قابل رسائی بناتی ہے: type/spacing کے لیے `rem` (predictable + صارف کی ترتیبات کی احترام کرتا ہے)، fluid layout کے لیے `%`/`vw`/`vh`، fixed تفصیلات کے لیے `px`، اور locally-relative sizing کے لیے `em`۔

نئی viewport اکائیں (`dvh`، `svh`) mobile address-bar کی height کے مسائل کو بھی ٹھیک کرتی ہیں۔