Responsive & Media Queries
Master Mobile-First architecture, @media (min-width) breakpoints, the viewport meta tag, and responsive layouts.
🎯 What You Will Master in This Lesson
☕ The Problem: One Website, Ten Thousand Screen Sizes
In 1994, when the web was invented, everyone used the same kind of device — a big desktop computer with a monitor. You designed for one screen size and you were done.
Fast forward to today: your website is visited by a 4-inch budget Android, a 6.7-inch iPhone Pro Max, a 10-inch iPad, a 13-inch MacBook, a 27-inch iMac, and even a 65-inch smart TV — all at the same time. There are over 10,000 different Android screen dimensions alone in the wild.
You cannot write different CSS files for each screen. Instead, you write one flexible CSS file with conditional rules — and those conditional rules are called Media Queries.
📰 Think of It Like a Newspaper
On a jam-packed commuter train, you fold your newspaper into a narrow vertical strip — one column, held in one hand while gripping the overhead handle. You read one story at a time.
On Sunday morning at the dining table, you spread the same newspaper wide open. Now you can see sports, politics, and business in three columns side by side, scanning everything at once.
A media query is simply an outfit change for your website based on the user's physical environment — mobile phones get a single column, desktops get the full panoramic layout.
⚠️ Step 0: The Viewport Meta Tag (Without This, Nothing Works!)
Before you can write a single media query, you need this one HTML line inside your <head>:
Without this tag:
- Mobile browsers fake a 980px desktop viewport
- Your page appears zoomed out and tiny
- Media queries never trigger correctly
- Text is microscopic on a real phone
With this tag:
- Browser uses the real physical screen width
- A 390px iPhone renders at 390px — not 980px
- Media queries fire at exactly the right pixel
- Content fills the screen comfortably
Historical context: When Steve Jobs unveiled the original iPhone in 2007, millions of websites were desktop-only with tiny text. To prevent them from looking completely broken, Safari secretly rendered them at 980px and zoomed out. This tag is how you opt out of that 2007 compatibility hack.
🔬 Anatomy of a Media Query
A media query has a very specific structure. Let's break it down token by token:
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
@media(min-width: 768px)min-width: 768px means "if the current viewport is AT LEAST 768 pixels wide." On a 390px phone this is FALSE (skipped). On a 1440px monitor this is TRUE (applied).{ CSS rules }Combining Multiple Conditions: and, not
You can chain multiple conditions together with logical operators:
/* Only between 600px AND 1024px — a 'sweet spot' range */
@media (min-width: 600px) and (max-width: 1024px) {
.sidebar { display: block; }
}
/* Modern Range Syntax (CSS Level 4 — cleaner!) */
@media (600px <= width <= 1024px) {
.sidebar { display: block; }
}
/* NOT — inverts the condition */
@media not (min-width: 768px) {
/* applies only on screens BELOW 768px */
}
📱 The Mobile-First Breakpoint Spectrum
A breakpoint is the viewport width at which your layout switches from one design to another. Think of them as the thresholds where your content naturally starts to look awkward — not specific phone models.
Single stacked column. Full-width thumb buttons. 16px body text minimum. No complex hover effects. Absolutely no fixed sidebars.
2-column card layouts. Horizontal tab navigation appears. Hero headlines slightly larger. Some horizontal padding to keep content from stretching.
3–4 column grids. Fixed sidebar appears. Rich hover animations. Mega dropdown menus. Max-width container to prevent extreme stretching on 4K displays.
Mobile-First means: start from left (simple) and add features as you move right (more screen space).
💻 Live Responsive Media Queries Playground
This pricing card demo starts as a single-column mobile layout. The media query at 600px switches it to a side-by-side row on larger screens. Try resizing the preview window, or change the 600px value to see breakpoints in action!
Mobile-First vs Desktop-First — What Really Happens?
This is not just a preference. The choice between min-width and max-width fundamentally changes how much code you write and how buggy your CSS becomes.
/* Default: complex desktop layout */
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
/* Now UNDO everything for mobile */
@media (max-width: 767px) {
.container {
display: block; /* undo grid */
grid-template-columns: unset;
width: 100%;
float: none; /* undo old floats */
}
}
You write the complex code FIRST, then waste more lines undoing it for the majority of users (mobile users are often 60%+ of traffic).
/* Default: simple, clean mobile layout */
.container {
display: block; /* 1 column */
}
/* Add complexity as screen GROWS */
@media (min-width: 768px) {
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
Zero override fights. Mobile gets the leanest CSS. Larger screens layer on richer features. Performance is better too — mobile browsers skip all the desktop CSS they don't need.
| Pattern | Query Keyword | How It Works | Industry Verdict |
|---|---|---|---|
| Mobile-First | @media (min-width) | Base CSS is mobile. Bigger screens progressively add complexity upward. | ★ Industry Standard. Clean, performant, bug-free. |
| Desktop-First | @media (max-width) | Base CSS is heavy desktop. Smaller screens must constantly undo and override rules. | Outdated. Leads to CSS bloat and override wars. |
Line-by-Line Breakdown of the Code Example
Let's walk through every meaningful line in the playground above:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Mandatory HTML prerequisite. Lives in the <head>. The two values inside content:
width=device-width— match page width to the screen's physical CSS pixel width.initial-scale=1.0— start at 100% zoom. No forced zoom-in or zoom-out on page load.
.pricing-container { flex-direction: column; }Mobile base style. No media query needed — this is the default. Cards stack top-to-bottom in a single column, perfectly scrollable on a narrow phone screen.
@media (min-width: 600px) { .pricing-container { flex-direction: row; } }The breakpoint trigger. The browser checks: is the current viewport at least 600px wide? On a 390px phone — NO, skip this block. On a 768px tablet — YES, apply flex-direction: row, switching cards from vertical stack to a side-by-side row layout.
.plan-card { flex: 1; }Equal-width columns. Inside the media query, flex: 1 tells each card to take an equal share of the available width. Two cards → 50% each. Three cards → 33.33% each. This is why adding a third card just works automatically.
🎛️ Beyond Screen Size: User-Preference Queries
Media queries are not just about screen width. Modern CSS can detect user accessibility preferences and input methods too:
@media (prefers-color-scheme: dark)Fires when the user has enabled Dark Mode in their OS settings (macOS, Windows, iOS, Android). Use it to swap your color palette — dark backgrounds, light text — without JavaScript or a toggle button.
@media (prefers-reduced-motion: reduce)Some users have vestibular disorders — animations and parallax scrolling cause them nausea or dizziness. When they toggle "Reduce Motion" in their OS settings, this query lets you disable or slow down your animations. This is an accessibility requirement, not optional.
@media (hover: hover)Tests if the primary input device can hover over elements. True for desktop mice and trackpads. False for touchscreens. Use this to only apply hover effects on devices that actually support them — preventing the frustrating "stuck hover" bug on mobile.
@media (orientation: landscape)Detects whether the device is held in portrait (taller than wide) or landscape (wider than tall) orientation. Useful for layout shifts when the user rotates their phone — e.g., switching a video player to full-width in landscape mode.
Q1Why do mobile smartphones render a website as a tiny, zoomed-out 980px desktop view if you forget the `<meta name='viewport'>` tag?
Q2Why is 'Mobile-First' styling with `min-width` considered vastly superior to 'Desktop-First' styling with `max-width`?
Q3How can modern CSS detect whether a user is using a real mouse pointer vs a touchscreen finger?
Practice Challenge: Build a 3-Column Card Layout
Open the live code editor above and try these steps in order:
- Add a 3rd card: Copy one of the
.plan-carddivs and paste a third card for "Enterprise" plan with price ₹999/mo. - Observe the magic: On the desktop preview, all 3 cards automatically share equal width (33.33% each) because of
flex: 1! - Change the breakpoint: Edit
min-width: 600pxtomin-width: 900pxand notice the 2-column layout now only activates on wider screens. - Bonus — try Dark Mode: Add a
@media (prefers-color-scheme: dark)block that changes thebodybackground to#0f172aand text to#e2e8f0.
💡 Click to view the 3-column + dark mode solution
/* 3-column layout */
@media (min-width: 600px) {
.pricing-container { flex-direction: row; gap: 20px; }
.plan-card { flex: 1; }
}
/* Dark mode auto-detection */
@media (prefers-color-scheme: dark) {
body { background: #0f172a; color: #e2e8f0; }
.plan-card { background: #1e293b; border-color: #334155; }
}
Common Pitfalls & Interview Preparation
❌ Pitfall 1: Writing Device-Specific Breakpoints
Never write @media (width: 375px) specifically for the iPhone 12. There are over 10,000 different Android screen widths. Breakpoints should be placed where your content naturally starts to look awkward — not where specific phone models happen to be.
❌ Pitfall 2: Forgetting the Viewport Meta Tag
Your media queries will seem to do absolutely nothing on a real phone if this tag is missing from your <head>. This is the #1 beginner debugging trap. Always paste this as the second line of your <head>, right after <meta charset="UTF-8">.
✅ Best Practice: Content-Driven Breakpoints
Resize your browser window slowly from 320px upward. When the layout looks cramped or awkward — add a breakpoint there. Your design tells you where breakpoints should go, not a chart of device specs.
✅ Modern: CSS Level 4 Range Syntax
Write @media (600px <= width <= 1024px) instead of @media (min-width: 600px) and (max-width: 1024px). The new math-like range syntax is shorter, clearer, and supported in all modern browsers (2023+).
💬 Interview Q: What is the difference between Responsive Design and Adaptive Design?
Responsive Design uses fluid percentages, CSS Flexbox, CSS Grid, and media queries to create a layout that flows smoothly across any continuous screen width — like water that takes the shape of any container. One HTML + CSS codebase handles all screen sizes.
Adaptive Design serves completely separate fixed layouts snapped to specific discrete device sizes (e.g., 320px for phones, 768px for tablets, 1200px for desktops). The server detects the device and sends the appropriate template.
Responsive Design is the overwhelming industry standard today because it requires only one codebase and adapts to devices that haven't been invented yet.
💬 Interview Q: What is @media (prefers-color-scheme: dark)?
It is a user-preference media feature that checks whether the user has toggled Dark Mode in their operating system (macOS System Preferences → Appearance, Windows 10/11 Settings, iOS/Android Display Settings).
When this condition is true, you can swap your CSS custom properties or color values to serve a dark palette automatically — without any JavaScript, without any toggle button, and without any page reload.
💬 Interview Q: Why do media queries not work even though I wrote them correctly?
90% of the time, the culprit is the missing viewport meta tag. On a real phone, without <meta name="viewport" content="width=device-width, initial-scale=1.0">, the browser reports a fake viewport of 980px — so every min-width query below 980px fires immediately and every query above 980px never fires on mobile.
Other common causes:
- CSS file not linked (check Network tab in DevTools)
- Typo in the property name inside the query block
- A more specific selector overriding the media query rule (specificity war)
- Testing in a desktop browser without simulating mobile in DevTools
💬 Interview Q: What does initial-scale=1.0 do in the viewport meta tag?
initial-scale=1.0 sets the initial zoom level when the page first loads to 100% — meaning one CSS pixel maps to one device pixel. Without it, some browsers might zoom in by default (e.g., if your page seems too small) or zoom out (if it seems too wide).
maximum-scale=1.0 and user-scalable=no are sometimes added alongside, but these disable user pinch-to-zoom which is an accessibility violation (WCAG 1.4.4) — never use them.