Responsive और Media Queries
Mobile-First सोच, @media (min-width), ब्रेकपॉइंट्स और viewport meta tag की गहराई। हर स्क्रीन साइज़ पर वेबसाइट को परफेक्ट बनाएं।
🎯 इस पाठ में आप क्या सीखेंगे
📱 असली समस्या: एक वेबसाइट, दस हज़ार स्क्रीन साइज़
1994 में जब इंटरनेट शुरू हुआ, तब सब लोग एक ही तरह के डिवाइस पर — बड़े desktop कंप्यूटर पर — वेबसाइट देखते थे। एक स्क्रीन साइज़ के लिए डिज़ाइन करो और काम खत्म!
आज हालात बिल्कुल बदल गए हैं। आपकी वेबसाइट एक साथ: 4-इंच के सस्ते Android फोन, 6.7-इंच iPhone Pro Max, 10-इंच iPad, 13-इंच MacBook, 27-इंच iMac, और यहाँ तक कि 65-इंच की Smart TV पर देखी जा सकती है।
सिर्फ Android फोन में ही 10,000 से ज्यादा अलग-अलग screen widths हैं। हर डिवाइस के लिए अलग CSS फ़ाइल लिखना असंभव है।
इसका हल है — एक ही CSS फ़ाइल में conditional rules — और उन conditional rules को Media Queries कहते हैं।
🗞️ लोकल ट्रेन में मुड़ा अखबार vs घर की डाइनिंग टेबल
सोचिए मुंबई की भीड़-भाड़ वाली लोकल ट्रेन में सुबह 8 बजे अखबार पढ़ रहे हैं। आप वहाँ 4-फीट का पूरा अखबार दोनों हाथों से फैला नहीं सकते — बगल वाले परेशान हो जाएँगे। आप उसे मोड़कर एक संकरा वर्टिकल कॉलम बना लेते हैं, एक हाथ से पकड़ते हैं, एक खबर पढ़ते हैं।
लेकिन संडे की सुबह घर की शांत डाइनिंग टेबल पर वही अखबार पूरा खोलकर रख देते हैं। एक नज़र में खेल, राजनीति, व्यापार — तीन कॉलम एक साथ दिखते हैं।
Media Query वेबसाइट के लिए माहौल के हिसाब से कपड़े बदलने जैसी है। मोबाइल पर एक कॉलम, टैबलेट पर दो, डेस्कटॉप पर तीन!
⚠️ Step 0: Viewport Meta Tag (बिना इसके सब बेकार है!)
Media Query लिखने से पहले, आपको यह एक HTML लाइन अपने <head> में लगानी ही होगी:
❌ बिना इस टैग के:
- मोबाइल ब्राउज़र नकली 980px की screen मान लेता है
- पेज ज़ूम-आउट होकर बहुत छोटा दिखता है
- आपकी media queries कभी सही से काम नहीं करतीं
- असली फोन पर text चींटी जितना छोटा हो जाता है
✅ इस टैग के साथ:
- ब्राउज़र असली physical screen width इस्तेमाल करता है
- 390px का iPhone → 390px पर render होता है
- Media queries बिल्कुल सही pixel पर trigger होती हैं
- Content आरामदायक तरीके से screen भरता है
इतिहास: 2007 में जब Steve Jobs ने पहला iPhone दिखाया, तब लाखों वेबसाइटें सिर्फ desktop के लिए थीं। उन्हें टूटा हुआ दिखने से बचाने के लिए Safari ने चुपके से उन्हें 980px पर render करना शुरू किया। यह टैग उस 2007 के पुराने hack से बाहर निकलने का तरीका है।
🔬 Media Query की बनावट (Anatomy) — हर शब्द का मतलब
Media Query एक तय structure में लिखी जाती है। आइए हर token (हिस्से) को अलग-अलग समझते हैं:
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
@media(min-width: 768px)min-width: 768px का मतलब: "अगर screen की चौड़ाई कम से कम 768px हो।" 390px के iPhone पर यह FALSE है (block ignore होगा)। 1440px के monitor पर TRUE है (CSS apply होगा)।{ CSS rules }Multiple Conditions जोड़ना: and, not
आप एक से ज्यादा conditions को logical operators से जोड़ सकते हो:
/* सिर्फ 600px से 1024px के बीच */
@media (min-width: 600px) and (max-width: 1024px) {
.sidebar { display: block; }
}
/* Modern Range Syntax — CSS Level 4 (ज्यादा readable!) */
@media (600px <= width <= 1024px) {
.sidebar { display: block; }
}
/* NOT — condition को उलट देता है */
@media not (min-width: 768px) {
/* 768px से छोटी screens पर apply होगा */
}
📐 मोबाइल-फर्स्ट Breakpoints का Spectrum
Breakpoint वह screen width है जहाँ आपका layout एक design से दूसरे design में switch करता है। ये specific phone models के pixel नहीं हैं — ये वो threshold हैं जहाँ content खुद भद्दा दिखने लगता है।
सिंगल कॉलम। उंगली से दबने वाले बड़े बटन। 16px minimum body text। कोई fixed sidebar नहीं। Complex hover effects नहीं।
2-कॉलम card layout। Horizontal tab navigation दिखाई देती है। थोड़ी बड़ी heading size। कुछ horizontal padding।
3–4 कॉलम grid। Fixed sidebar। Rich hover animations। Mega dropdown menus। Max-width container 4K पर stretch रोकने के लिए।
Mobile-First का मतलब: बाएं से शुरू करो (simple) और जैसे-जैसे screen बड़ी हो, features जोड़ते जाओ (दाईं तरफ)।
💻 लाइव रिस्पॉन्सिव Media Queries एडिटर
यह pricing card demo मोबाइल पर single-column stack से शुरू होता है। 600px पर media query trigger होती है और cards side-by-side row में आ जाते हैं। 600px की value बदलकर देखें कि breakpoint कैसे काम करता है!
Mobile-First vs Desktop-First — Code में क्या फ़र्क पड़ता है?
यह सिर्फ preference नहीं है। min-width और max-width का चुनाव directly affect करता है कि आप कितना code लिखते हो और कितने bugs होते हैं।
/* पहले complex desktop layout */
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
/* फिर mobile के लिए सब undo करो */
@media (max-width: 767px) {
.container {
display: block; /* undo */
grid-template-columns: unset;
width: 100%;
}
}
पहले complex code लिखो, फिर ज़्यादातर users (मोबाइल users अक्सर 60%+ होते हैं) के लिए उसे काटने में दुगुनी मेहनत।
/* Default: सरल mobile layout */
.container {
display: block; /* 1 column */
}
/* screen बड़ी हो तो नया feature जोड़ो */
@media (min-width: 768px) {
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
Override का कोई झगड़ा नहीं। Mobile को सबसे lean CSS मिलती है। बड़ी screens पर rich features layer-by-layer जुड़ती हैं। Performance भी बेहतर।
| तरीका | Query | यह कैसे काम करता है | इंडस्ट्री का फैसला |
|---|---|---|---|
| Mobile-First | @media (min-width) | बेस code mobile का। बड़ी screen पर features जुड़ते जाते हैं। | ★ आधुनिक Standard। साफ, Fast, Bug-free। |
| Desktop-First | @media (max-width) | बेस code heavy desktop का। Mobile पर सब undo करना पड़ता है। | पुराना। CSS bloat और override का झगड़ा। |
Code का एक-एक लाइन विश्लेषण
ऊपर दिए गए playground के हर ज़रूरी line को समझते हैं:
<meta name="viewport" content="width=device-width, initial-scale=1.0">अनिवार्य HTML prerequisite। <head> में रहता है। content के दो values:
width=device-width— page की चौड़ाई को screen के असली CSS pixels से match करो।initial-scale=1.0— page load पर 100% zoom रखो। ज़बरदस्ती zoom-in या zoom-out नहीं।
.pricing-container { flex-direction: column; }Mobile base style। कोई media query नहीं — यह default है। Cards ऊपर-नीचे एक कॉलम में stack होते हैं, narrow phone पर आराम से scroll हो सके।
@media (min-width: 600px) { .pricing-container { flex-direction: row; } }Breakpoint trigger। ब्राउज़र check करता है: क्या screen width कम से कम 600px है? 390px iPhone पर — NO, block skip। 768px tablet पर — YES, flex-direction: row apply, cards side-by-side आ जाते हैं।
.plan-card { flex: 1; }Equal-width columns। Media query के अंदर flex: 1 हर card को available width का बराबर हिस्सा देता है। दो cards → 50% each। तीन cards → 33.33% each। इसीलिए तीसरा card add करने पर automatically काम करता है।
🎛️ Screen Size से आगे: User-Preference Queries
Media queries सिर्फ screen width के बारे में नहीं हैं। Modern CSS user की accessibility preferences और input method भी detect कर सकता है:
@media (prefers-color-scheme: dark)User ने OS में Dark Mode चालू किया है तो यह fire होती है (macOS, Windows, iOS, Android)। बिना JavaScript और बिना toggle button के automatically color palette swap कर सकते हो।
@media (prefers-reduced-motion: reduce)कुछ users को vestibular disorders होती हैं — animations और parallax scrolling से उन्हें चक्कर या मितली आती है। OS में "Reduce Motion" toggle करने पर यह query fire होती है। यह accessibility की requirement है।
@media (hover: hover)यह check करता है कि primary input device hover कर सकता है या नहीं। Desktop mouse पर TRUE, touchscreen पर FALSE। इससे mobile पर "stuck hover" का bug ठीक होता है — hover effects सिर्फ वहाँ apply होते हैं जहाँ actually support है।
@media (orientation: landscape)Device portrait (ऊँचा) में है या landscape (चौड़ा) में — यह detect करता है। Phone rotate करने पर layout adjust करने के लिए useful है, जैसे video player को landscape में full-width करना।
Q1अगर आप HTML के `<head>` में `<meta name='viewport'>` टैग लगाना भूल जाएँ, तो स्मार्टफोन आपकी वेबसाइट को 980px का डेस्कटॉप मानकर बहुत छोटा और ज़ूम-आउट क्यों दिखाता है?
Q2`@media (min-width)` के साथ 'Mobile-First' सोचना 'Desktop-First' (`max-width`) से कहीं बेहतर क्यों माना जाता है?
Q3मॉडर्न CSS यह कैसे पता लगाता है कि यूजर टचस्क्रीन पर उंगली से छू रहा है या कंप्यूटर पर असली माउस चला रहा है?
खुद ट्राई करो: 3-Column Layout + Dark Mode
ऊपर के live editor में यह steps order से करो:
- तीसरा card जोड़ो:
.plan-cardको copy करके "Enterprise" plan का तीसरा card paste करो — price ₹999/mo। - जादू देखो: Desktop preview में तीनों cards automatically बराबर width (33.33% each) में आ जाते हैं क्योंकि
flex: 1है! - Breakpoint बदलो:
min-width: 600pxकोmin-width: 900pxकरो और देखो कि layout shift अब बाद में होता है। - Bonus — Dark Mode:
@media (prefers-color-scheme: dark)block add करो जोbodyका background#0f172aऔर text#e2e8f0करे।
💡 सही समाधान देखने के लिए क्लिक करें
/* 3-column layout */
@media (min-width: 600px) {
.pricing-container { flex-direction: row; gap: 20px; }
.plan-card { flex: 1; }
}
/* Dark mode auto-detect */
@media (prefers-color-scheme: dark) {
body { background: #0f172a; color: #e2e8f0; }
.plan-card { background: #1e293b; border-color: #334155; }
}
आम गलतियाँ और इंटरव्यू के सवाल
❌ गलती 1: Specific Phone Model के Pixels
कभी @media (width: 375px) मत लिखो सिर्फ iPhone 12 के लिए। बाज़ार में 10,000+ Android screen widths हैं। Breakpoints वहाँ लगाओ जहाँ आपका content खुद भद्दा दिखने लगे।
❌ गलती 2: Viewport Meta Tag भूल जाना
अगर यह tag <head> में नहीं है, तो असली phone पर media queries बिल्कुल काम नहीं करेंगी। यह beginners की #1 debugging trap है। हमेशा <meta charset="UTF-8"> के ठीक बाद paste करो।
✅ Best Practice: Content-Driven Breakpoints
Browser window को 320px से धीरे-धीरे बड़ा करते जाओ। जहाँ layout cramped या awkward दिखे — वहाँ breakpoint लगाओ। आपका design खुद बताता है कि breakpoints कहाँ चाहिए।
✅ Modern: CSS Level 4 Range Syntax
@media (600px <= width <= 1024px) लिखो, पुराने (min-width: 600px) and (max-width: 1024px) की जगह। नया math-like syntax छोटा, clear है और 2023+ सभी modern browsers में support होता है।
💬 इंटरव्यू प्रश्न: Responsive Design और Adaptive Design में क्या फ़र्क है?
Responsive Design में fluid percentages, CSS Flexbox, CSS Grid और media queries से layout तरल पानी की तरह किसी भी continuous screen width पर automatically ढल जाता है। एक ही HTML + CSS codebase सब handles करती है।
Adaptive Design में कुछ fixed, discrete sizes (जैसे 320px, 768px, 1200px) के लिए बिल्कुल अलग-अलग fixed templates बनाए जाते हैं। Server device detect करके सही template serve करता है।
Responsive Design आज industry standard है क्योंकि एक codebase सब handles करती है और उन devices पर भी काम करती है जो अभी बने नहीं हैं।
💬 इंटरव्यू प्रश्न: @media (prefers-color-scheme: dark) क्या करता है?
यह एक user-preference media feature है जो check करती है कि user ने OS में Dark Mode चालू किया है या नहीं (macOS System Preferences, Windows 10/11 Settings, iOS/Android Display Settings)।
जब यह true होती है, आप CSS custom properties या color values swap करके automatically dark palette serve कर सकते हो — बिना JavaScript, बिना toggle button, बिना page reload।
💬 इंटरव्यू प्रश्न: Media Queries सही लिखने के बावजूद काम क्यों नहीं करतीं?
90% cases में culprit होता है Viewport Meta Tag का missing होना। असली phone पर, <meta name="viewport"> के बिना, browser 980px का नकली viewport report करता है — इसलिए 980px से नीचे के min-width queries immediately fire होती हैं और 980px से ऊपर की mobile पर कभी नहीं।
अन्य common causes:
- CSS file link नहीं है (DevTools का Network tab check करो)
- Query block के अंदर property name में typo
- कोई ज़्यादा specific selector media query को override कर रहा है (specificity war)
- DevTools में mobile simulate किए बिना desktop browser पर test करना
💬 इंटरव्यू प्रश्न: Viewport Meta Tag में initial-scale=1.0 का क्या काम है?
initial-scale=1.0 page के पहली बार load होने पर zoom level को 100% set करता है — यानी 1 CSS pixel = 1 device pixel। बिना इसके कुछ browsers default zoom-in या zoom-out कर सकते हैं।
user-scalable=no या maximum-scale=1.0 कभी मत लगाओ — ये user का pinch-to-zoom disable कर देते हैं जो WCAG 1.4.4 accessibility violation है।