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

Question

Accepted Answer

**मीडिया क्वेरीज** डिव्हाइसच्या वैशिष्ट्यांवर आधारित CSS सशर्तपणे लागू करतात — अधिकतर **व्यूपोर्ट रुंदी** — एक स्टाइलशीटला फोन, टॅबलेट आणि डेस्कटॉपशी जुळविता येते.

```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; }
}
```

## मोबाइल-पहिले (min-width) विरुद्ध डेस्कटॉप-पहिले (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) { ... }
```

**मोबाइल-पहिले** (`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`) *मूळ घटकाच्या* आकारात प्रतिक्रिया दर्शवतात — खरोखर पुन्हा वापरण्यायोग्य घटकांसाठी उत्तम. ते मीडिया क्वेरीजची जागा न घेता पूरक असतात.

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

मीडिया क्वेरीज प्रतिक्रियाशील डिजाइनचा पाया आहेत — लेआउट, स्पेसिंग आणि स्तंभ स्क्रीन साइजशी जुळविणे.

मोबाइल-पहिले `min-width` दृष्टिकोन CSS व्यवस्थापित करण्यायोग्य ठेवतो, आणि प्राधान्य क्वेरीज (`prefers-reduced-motion`, `prefers-color-scheme`) प्रतिक्रियाशीलता प्रवेशयोग्यता आणि थीमिंगमध्ये विस्तारित करतात.