📘 Lesson · Lesson 31
Media Queries
Media Queries
What Media Queries Do
Media queries let you apply different CSS at different screen sizes. This is the tool that makes truly responsive design possible: "when the screen is narrow, stack these columns; when it's wide, put them side by side." They're conditional CSS — a set of styles that only activate when a condition about the screen (usually its width) is met. Everything else in responsive design (fluid layouts, flexible images) adapts smoothly, but media queries are how you make DELIBERATE layout changes at specific sizes.
The @media Syntax
/* Normal CSS - applies everywhere */
.menu { display: flex; }
/* Media query - applies ONLY when the condition is true */
@media (max-width: 768px) {
.menu {
display: block; /* on screens 768px or narrower, stack the menu */
}
}The structure:
@media (condition) { ... rules ... }. Inside the curly braces you put normal CSS rules that ONLY apply when the condition is met. The two key conditions: max-width: 768px means "when the screen is 768px or NARROWER" (targeting mobile/tablet), and min-width: 768px means "when the screen is 768px or WIDER" (targeting tablet/desktop). So the example says: normally the menu is a flex row, but on narrow screens it becomes a stacked block. That's responsive design in a nutshell — change the rules based on width.Common Breakpoints — where to switch
/* Mobile phones (up to 600px) - often the default, no query needed */
@media (min-width: 600px) { /* large phones / small tablets */ }
@media (min-width: 768px) { /* tablets */ }
@media (min-width: 1024px) { /* laptops / desktops */ }
@media (min-width: 1280px) { /* large desktops */ }"Breakpoints" are the screen widths where your layout changes. These common values (600, 768, 1024, 1280px) roughly match phone, tablet, and desktop sizes. But here's the professional secret: don't slavishly follow device sizes — add breakpoints where YOUR design breaks. Resize your browser slowly; wherever the layout starts looking cramped or awkward, that's where you add a breakpoint. Devices change every year, but "where does my content stop looking good" is timeless. Use these numbers as starting points, then adjust to your actual design.
Mobile-First Queries — build up with min-width
/* BASE styles = mobile (no query) - single column */
.cards {
display: grid;
grid-template-columns: 1fr; /* 1 column on phones */
gap: 20px;
}
/* Enhance for tablets and up */
@media (min-width: 768px) {
.cards { grid-template-columns: repeat(2, 1fr); } /* 2 columns */
}
/* Enhance further for desktops */
@media (min-width: 1024px) {
.cards { grid-template-columns: repeat(3, 1fr); } /* 3 columns */
}This is the mobile-first pattern in action, and it's the recommended approach. Your BASE CSS (no media query) is the mobile layout — simple, single-column. Then you use
min-width queries to progressively ADD complexity as the screen grows: 2 columns at tablet, 3 at desktop. Reading top to bottom, the design gets richer as screens get bigger. This is cleaner than the reverse (max-width queries stripping a desktop design down), and it matches how you should think: essential content first, enhancements layered on. Notice how it builds directly on the grid you already learned.A Real Example — responsive navigation
/* Mobile: stacked menu (base) */
.nav {
display: flex;
flex-direction: column;
}
/* Desktop: horizontal menu */
@media (min-width: 768px) {
.nav {
flex-direction: row;
justify-content: space-between;
}
}A classic real-world use: on phones the navigation stacks vertically (easy to tap), but on wider screens it spreads into a horizontal bar. Just by changing
flex-direction inside a media query, one set of HTML serves both. This combines everything you've learned — flexbox for the layout, media queries for the responsive switch. Real responsive sites are built from dozens of small decisions exactly like this: "what should change at this width?" Media queries are how you answer that question.Exam Corner
Q: What do media queries do? Apply different CSS depending on the screen size (or other conditions).
Q: Write the media query syntax.
Q: Difference between min-width and max-width in a query? min-width targets screens that wide or wider; max-width targets that wide or narrower.
Q: What is a breakpoint? A screen width at which the layout changes via a media query.
Q: What is the mobile-first query approach? Base CSS for mobile, then min-width queries adding enhancements for larger screens.
Q: Write the media query syntax.
@media (max-width: 768px) { ...rules... }Q: Difference between min-width and max-width in a query? min-width targets screens that wide or wider; max-width targets that wide or narrower.
Q: What is a breakpoint? A screen width at which the layout changes via a media query.
Q: What is the mobile-first query approach? Base CSS for mobile, then min-width queries adding enhancements for larger screens.
Media Queries क्या करते हैं
Media queries आपको अलग screen sizes पर अलग CSS लगाने देते हैं. यही tool सच में responsive design संभव बनाता है: "जब screen तंग हो, इन columns को stack करो; जब चौड़ी हो, side by side रखो." ये conditional CSS हैं — styles का समूह जो सिर्फ तब activate होता है जब screen के बारे में कोई शर्त (आमतौर पर उसकी width) पूरी हो. responsive design में बाकी सब (fluid layouts, flexible images) smoothly adapt होता है, पर media queries से आप specific sizes पर JAANBUJHKAR layout बदलाव करते हैं.
@media Syntax
/* Normal CSS - har jagah lagta hai */
.menu { display: flex; }
/* Media query - SIRF jab condition sach ho tab lagta */
@media (max-width: 768px) {
.menu {
display: block; /* 768px ya tang screens par menu stack */
}
}Structure:
@media (condition) { ... rules ... }. Curly braces के अंदर आप normal CSS rules रखते हैं जो SIRF condition पूरी होने पर लगते हैं. दो मुख्य conditions: max-width: 768px मतलब "जब screen 768px या TANG हो" (mobile/tablet target), और min-width: 768px मतलब "जब screen 768px या CHAUDI हो" (tablet/desktop target). तो example कहता है: सामान्यतः menu flex row है, पर तंग screens पर stacked block बनता है. यही संक्षेप में responsive design है — width के आधार पर rules बदलो.आम Breakpoints — कहां switch करें
/* Mobile phones (600px tak) - aksar default, koi query nahi chahiye */
@media (min-width: 600px) { /* bade phones / chhote tablets */ }
@media (min-width: 768px) { /* tablets */ }
@media (min-width: 1024px) { /* laptops / desktops */ }
@media (min-width: 1280px) { /* bade desktops */ }"Breakpoints" वे screen widths हैं जहां आपका layout बदलता है. ये आम values (600, 768, 1024, 1280px) मोटे तौर पर phone, tablet, और desktop sizes से match करती हैं. पर professional राज़: device sizes को आंख मूंदकर मत follow कीजिए — breakpoints वहां जोड़िए जहां आपका design टूटे. अपना browser धीरे-धीरे resize कीजिए; जहां भी layout तंग या अजीब दिखने लगे, वहां breakpoint जोड़िए. Devices हर साल बदलते हैं, पर "मेरा content कहां अच्छा दिखना बंद करता है" timeless है. इन numbers को starting points के रूप में use कीजिए, फिर अपने असली design के हिसाब से adjust कीजिए.
Mobile-First Queries — min-width से बनाइए
/* BASE styles = mobile (koi query nahi) - single column */
.cards {
display: grid;
grid-template-columns: 1fr; /* phones par 1 column */
gap: 20px;
}
/* Tablets aur upar ke liye enhance */
@media (min-width: 768px) {
.cards { grid-template-columns: repeat(2, 1fr); } /* 2 columns */
}
/* Desktops ke liye aur enhance */
@media (min-width: 1024px) {
.cards { grid-template-columns: repeat(3, 1fr); } /* 3 columns */
}यह mobile-first pattern काम करते हुए है, और यही recommended approach है. आपकी BASE CSS (कोई media query नहीं) mobile layout है — सरल, single-column. फिर आप
min-width queries से screen बढ़ने पर progressively जटिलता JODTE हैं: tablet पर 2 columns, desktop पर 3. ऊपर से नीचे पढ़ते हुए, screens बड़े होने पर design समृद्ध होता है. यह उल्टे (max-width queries desktop design को छांटते) से साफ है, और यह वैसा match करता है जैसा आपको सोचना चाहिए: ज़रूरी content पहले, enhancements परत-दर-परत. ध्यान दीजिए यह सीधे उस grid पर बनता है जो आप पहले सीख चुके.असली Example — responsive navigation
/* Mobile: stacked menu (base) */
.nav {
display: flex;
flex-direction: column;
}
/* Desktop: horizontal menu */
@media (min-width: 768px) {
.nav {
flex-direction: row;
justify-content: space-between;
}
}Classic असली इस्तेमाल: phones पर navigation vertically stack होता है (tap करना आसान), पर चौड़ी screens पर horizontal bar में फैलता है. बस media query के अंदर
flex-direction बदलकर, एक HTML दोनों serve करता है. यह सब कुछ combine करता है जो आपने सीखा — layout के लिए flexbox, responsive switch के लिए media queries. असली responsive sites ठीक ऐसे दर्जनों छोटे फैसलों से बनती हैं: "इस width पर क्या बदलना चाहिए?" Media queries से आप उस सवाल का जवाब देते हैं.Exam Corner
Q: Media queries क्या करते हैं? Screen size (या अन्य conditions) के आधार पर अलग CSS लगाते हैं.
Q: Media query syntax लिखिए.
Q: Query में min-width और max-width में अंतर? min-width उतनी चौड़ी या ज़्यादा screens target करता; max-width उतनी चौड़ी या तंग.
Q: Breakpoint क्या है? वह screen width जहां media query से layout बदलता है.
Q: Mobile-first query approach क्या है? Mobile के लिए base CSS, फिर बड़ी screens के लिए enhancements जोड़ते min-width queries.
Q: Media query syntax लिखिए.
@media (max-width: 768px) { ...rules... }Q: Query में min-width और max-width में अंतर? min-width उतनी चौड़ी या ज़्यादा screens target करता; max-width उतनी चौड़ी या तंग.
Q: Breakpoint क्या है? वह screen width जहां media query से layout बदलता है.
Q: Mobile-first query approach क्या है? Mobile के लिए base CSS, फिर बड़ी screens के लिए enhancements जोड़ते min-width queries.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.