How to Use Media Query CSS for Any Screen Size

अगर तुमने कभी नोटिस किया हो कि कोई वेबसाइट मोबाइल पर अलग दिखती है और लैपटॉप पर अलग, तो इसका सीधा-सा कारण है media query css. मान लो तुम्हारे पास एक वेबसाइट है और तुम चाहते हो कि वो मोबाइल, टैबलेट और डेस्कटॉप तीनों पर सही से दिखे बस यहीं पर media queries काम में आती हैं। यह एक तरीका है जिससे हम CSS को ये बता सकते हैं कि कौन-सी स्टाइल्स कब अप्लाई करनी हैं, स्क्रीन की चौड़ाई या डिवाइस के हिसाब से।

Media Query CSS कैसे काम करता है?

जब हम कोई media query लिखते हैं, तो हम ये तय करते हैं कि CSS कब अप्लाई होगी। नीचे एक छोटा-सा उदाहरण देखो:

@media (max-width: 768px) {
body {
background-color: lightblue;
}
}

इसका मतलब है: “अगर स्क्रीन की चौड़ाई 768px से कम है, तो बॉडी का बैकग्राउंड lightblue कर दो।” यानि ये स्टाइल सिर्फ मोबाइल या छोटे टैबलेट डिवाइस पर अप्लाई होगी।

कुछ Common Media Queries

नीचे कुछ काम आने वाले media query examples हैं जो responsive design के लिए बहुत ज़रूरी हैं:

/* मोबाइल के लिए */
@media (max-width: 480px) {
.container {
font-size: 14px;
}
}

/* टैबलेट के लिए */
@media (min-width: 481px) and (max-width: 768px) {
.container {
font-size: 16px;
}
}

/* डेस्कटॉप के लिए */
@media (min-width: 769px) {
.container {
font-size: 18px;
}
}

इससे तुम्हारी वेबसाइट हर डिवाइस पर अलग-अलग तरीके से दिखेगी – एकदम प्रो की तरह!

Media Query CSS क्यों ज़रूरी है?

Responsive Design – हर स्क्रीन पर अच्छा दिखने के लिए।
Better User Experience – विज़िटर को स्क्रॉल या ज़ूम ना करना पड़े।
SEO में मदद करता है – Google responsive websites को ज़्यादा पसंद करता है।
Professional Look – जिससे वेबसाइट modern लगे।

Media Query CSS कैसे शुरू करें?

HTML और CSS की basic समझ होनी चाहिए।
अपने CSS फाइल में या <style> टैग के अंदर media queries लिख सकते हो।
ब्राउज़र में inspect tool से टेस्ट करो कि कौन-सी style कब लग रही है।

कुछ Practical Tips

हमेशा mobile-first design सोचो यानी पहले मोबाइल के लिए design करो, फिर बड़े स्क्रीन के लिए।
Pixels की जगह कभी-कभी %, em, या rem use करो ताकि scalability अच्छी रहे।
Test ज़रूर करो अलग-अलग screen sizes पर।