मीडिया क्वेरीज़ प्रतिक्रियाशील डिज़ाइन को कैसे सक्षम करती हैं?

Question

Accepted Answer

**मीडिया क्वेरीज़** डिवाइस विशेषताओं के आधार पर शर्तीय रूप से CSS लागू करती हैं — अक्सर **viewport width** — जिससे एक ही स्टाइलशीट फोन, टैबलेट और डेस्कटॉप के अनुकूल हो सकती है।

```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) vs 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 */ }
```

## भविष्य पर एक नोट: container queries

मीडिया क्वेरीज़ **viewport** का जवाब देती हैं; नई **container queries** (`@container`) *parent element के* आकार का जवाब देती हैं — वास्तव में पुन: उपयोग किए जा सकने वाले घटकों के लिए बेहतर। वे मीडिया क्वेरीज़ को बदलने के बजाय पूरक हैं।

## यह क्यों महत्वपूर्ण है

मीडिया क्वेरीज़ प्रतिक्रियाशील डिज़ाइन की नींव हैं — लेआउट, spacing और columns को स्क्रीन आकार के अनुसार अनुकूल करना।

mobile-first `min-width` दृष्टिकोण CSS को प्रबंधनीय रखता है, और प्राथमिकता क्वेरीज़ (`prefers-reduced-motion`, `prefers-color-scheme`) प्रतिक्रियाशीलता को पहुंच और थीम तक विस्तारित करते हैं।