# मीडिया क्वेरी और मोबाइल-फर्स्ट — CSS Fundamentals: Layout, Flexbox, Grid और Responsive Design

Source: https://www.skillbyai.com/hi/css/css-media-queries

> min-width के साथ mobile-first शुरू करके media queries से viewport size के अनुसार styles लगाएँ।

## मीडिया क्वेरी सिंटैक्स

`@media (condition) { ... }` उन रूल्स को लपेटता है जो केवल तब लागू होते हैं जब शर्त पूरी हो — सबसे आम रूप से व्यूपोर्ट की चौड़ाई।

## एक ब्रेकपॉइंट

600px से नीचे, कॉलम साथ-साथ की बजाय स्टैक हो जाते हैं।

```css
.layout {
  display: flex;
  gap: 16px;
}

@media (max-width: 600px) {
  .layout {
    flex-direction: column;
  }
}
```

## मोबाइल-फर्स्ट तरीका

पहले **छोटी स्क्रीन** के लिए बेस स्टाइल लिखें, फिर स्क्रीन बड़ी होने पर लेआउट बेहतर बनाने के लिए `min-width` मीडिया क्वेरी जोड़ें — सरल सीएसएस, और फ़ोन को डेस्कटॉप-ओनली ओवरराइड डाउनलोड नहीं करने पड़ते।

**Quiz:** मोबाइल-फर्स्ट स्टाइलशीट आमतौर पर किस मीडिया क्वेरी शर्त का उपयोग करती है?

- [x] min-width
- [ ] max-width
- [ ] aspect-ratio
- [ ] print

*Answer:* min-width. min-width क्वेरी स्क्रीन चौड़ी होने पर स्टाइल जोड़ती हैं, जो मोबाइल-फर्स्ट के बेस-फिर-बढ़ाओ पैटर्न से मेल खाता है।