# मीडिया क्वेरी और मोबाइल-फर्स्ट — सीएसएस

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

> व्यूपोर्ट आकार के आधार पर अलग स्टाइल लगाएँ, छोटी स्क्रीन से शुरू करते हुए।

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

`@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

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