# सीएसएस media queries — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन

Source: https://www.geekswithgeeks.com/hi/responsive-design/css-media-queries

> @media rules का उपयोग करके विभिन्न स्क्रीन आकारों पर विभिन्न styles लागू करें — responsive CSS का core।

## Media query की संरचना

Syntax: `@media (condition) { /* CSS here */ }`। आम conditions: `(min-width: 768px)` — "जब स्क्रीन 768px या चौड़ी हो तो लागू करें", `(max-width: 767px)` — "जब स्क्रीन 767px या narrower हो तो लागू करें", `(orientation: landscape)` — "landscape mode में लागू करें"।

## Mobile-first media query pattern

Mobile के लिए base CSS लिखें। फिर बड़ी स्क्रीन के लिए progressively enhance करने के लिए `min-width` का उपयोग करें।

```css
/* Mobile (base) */
.card { width: 100%; font-size: 14px; }

/* Tablet and up */
@media (min-width: 768px) {
  .card { width: 48%; font-size: 16px; }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .card { width: 32%; font-size: 18px; }
}
```

## आम breakpoints

ये चौड़ाइयाँ आम device categories से map करती हैं। कोई standard नहीं है; अपने content के अनुसार adjust करें।

```css
/* Mobile (320px - 767px) */
body { font-size: 14px; }

/* Tablet (768px - 1023px) */
@media (min-width: 768px) {
  body { font-size: 16px; }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  body { font-size: 18px; }
}

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
  body { font-size: 20px; }
}
```

**Quiz:** @media (min-width: 768px) का क्या मतलब है?

- [x] जब स्क्रीन 768px या चौड़ी हो तो लागू करें
- [ ] जब स्क्रीन 768px या narrower हो तो लागू करें
- [ ] केवल 768px पर लागू करें

*Answer:* जब स्क्रीन 768px या चौड़ी हो तो लागू करें. `min-width: 768px` का अर्थ है "768px और ऊपर" — एक lower bound।

## Mobile-first में max-width से बचें

Mobile-first में, progressive enhancement के लिए min-width use करें। max-width desktop-first thinking है।