अगर तुमने कभी नोटिस किया हो कि कोई वेबसाइट मोबाइल पर अलग दिखती है और लैपटॉप पर अलग, तो इसका सीधा-सा कारण है media query css. मान लो तुम्हारे पास एक वेबसाइट है और तुम चाहते हो कि वो मोबाइल, टैबलेट और डेस्कटॉप तीनों पर सही से दिखे बस यहीं पर media queries काम में आती हैं। यह एक तरीका है जिससे हम CSS को ये बता सकते हैं कि कौन-सी स्टाइल्स कब अप्लाई करनी हैं, स्क्रीन की चौड़ाई या डिवाइस के हिसाब से।
जब हम कोई media query लिखते हैं, तो हम ये तय करते हैं कि CSS कब अप्लाई होगी। नीचे एक छोटा-सा उदाहरण देखो:
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
इसका मतलब है: “अगर स्क्रीन की चौड़ाई 768px से कम है, तो बॉडी का बैकग्राउंड lightblue कर दो।” यानि ये स्टाइल सिर्फ मोबाइल या छोटे टैबलेट डिवाइस पर अप्लाई होगी।
नीचे कुछ काम आने वाले 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;
}
}
इससे तुम्हारी वेबसाइट हर डिवाइस पर अलग-अलग तरीके से दिखेगी – एकदम प्रो की तरह!
Responsive Design – हर स्क्रीन पर अच्छा दिखने के लिए।
Better User Experience – विज़िटर को स्क्रॉल या ज़ूम ना करना पड़े।
SEO में मदद करता है – Google responsive websites को ज़्यादा पसंद करता है।
Professional Look – जिससे वेबसाइट modern लगे।
HTML और CSS की basic समझ होनी चाहिए।
अपने CSS फाइल में या <style> टैग के अंदर media queries लिख सकते हो।
ब्राउज़र में inspect tool से टेस्ट करो कि कौन-सी style कब लग रही है।
हमेशा mobile-first design सोचो यानी पहले मोबाइल के लिए design करो, फिर बड़े स्क्रीन के लिए।
Pixels की जगह कभी-कभी %, em, या rem use करो ताकि scalability अच्छी रहे।
Test ज़रूर करो अलग-अलग screen sizes पर।
Techy Notes is a digital learning platform offering Digital Marketing Notes, SEO resources, AI learning content, and practical technology guides in Hindi.
© 2026 Created By Techy Notes
