मिडिया क्वेरीहरूले रेस्पोन्सिभ डिजाइनलाई कसरी सक्षम गर्छन्?

Question

Accepted Answer

**मिडिया क्वेरीहरू** डिभाइसका विशेषताहरू — प्रायः **viewport चौडाइ** — को आधारमा CSS लाई सशर्त रूपमा लागू गर्छन्, जसले एक stylesheet लाई फोनहरू, ट्याबलेटहरू र डेस्कटपहरूमा अनुकूल गर्न अनुमति दिन्छ।

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## Mobile-first (min-width) बनाम desktop-first (max-width)

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**Mobile-first** (`min-width`) सामान्यतया अधिमानित हुन्छ: तपाई सानो स्क्रीनहरूको लागि साधारण आधार शैलीहरू लेख्नुहुन्छ, त्यसपछि ठूलो स्क्रीनहरूको लागि प्रगतिशीलভাবे जटिलता थप्नुहुन्छ। यो साधारणतः सफा, हल्का CSS उत्पादन गर्छ र कन्टेन्ट कसरी पुनर्प्रवाह हुन्छ भन्ने कुरासँग मेल खान्छ।

## अन्य उपयोगी क्वेरीहरू

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` र `prefers-color-scheme` प्रयोगकर्ता *प्राथमिकताहरू* मा प्रतिक्रिया गर्छन्, स्क्रीन साइजमा होइन — पहुँचयोग्यता र थिमिङको लागि महत्त्वपूर्ण।

## अवस्थाहरू जोडना

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## भविष्यमा एक नोट: कन्टेनर क्वेरीहरू

मिडिया क्वेरीहरू **viewport** मा प्रतिक्रिया गर्छन्; नयाँ **कन्टेनर क्वेरीहरू** (`@container`) एक *अभिभावक तत्वको* साइजमा प्रतिक्रिया गर्छन् — साँच्चै पुनः प्रयोग गर्न सकिने कम्पोनेन्टहरूको लागि राम्रो। तिनीहरू मिडिया क्वेरीहरूलाई प्रतिस्थापित गर्नुको सट्टा पूरक।

## यो किन महत्त्वपूर्ण छ

मिडिया क्वेरीहरू रेस्पोन्सिभ डिजाइनको आधार हुन् — लेआउट, स्पेसिङ र स्तम्भहरूलाई स्क्रीन साइजमा अनुकूल गर्छन्।

Mobile-first `min-width` दृष्टिकोणले CSS लाई व्यवस्थापन योग्य राख्छ, र प्राथमिकता क्वेरीहरू (`prefers-reduced-motion`, `prefers-color-scheme`) रेस्पोन्सिभनेसलाई पहुँचयोग्यता र थिमिङमा विस्तार गर्छन्।