तपाइँ कुन 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 बनाम 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`) मोबाइल ठेगाना-बार उचाइको समस्याहरू पनि समाधान गर्छन्।