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

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

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

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

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

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

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

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

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

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

• min-width
• max-width
• aspect-ratio