What Are CSS Media Queries and How Do They Work?
Learn how CSS media queries work, mobile-first breakpoints, and how to build responsive layouts that adapt live.
Expected Interview Answer
A media query is a CSS conditional block that applies a set of styles only when the browser environment matches specified conditions, most commonly viewport width, letting one stylesheet adapt layout, typography, or visibility across phones, tablets, and desktops without separate pages per device.
The @media rule tests one or more features — width, height, orientation, resolution, prefers-color-scheme, prefers-reduced-motion — combined with logical operators like and, or, and not, and applies its enclosed CSS block only when the condition evaluates true at the current viewport/device state. The dominant modern approach is mobile-first: base styles target the smallest screens by default, and min-width breakpoints progressively layer on styles for wider viewports, which tends to produce leaner, more maintainable CSS than a desktop-first max-width approach. Because media queries re-evaluate continuously as the viewport is resized (not just on page load), responsive layouts update live, which is why testing by resizing the browser window is a valid verification method. Beyond layout, media queries also drive accessibility and user-preference adaptations, like reduced-motion animations or dark-mode color schemes, extending well past pure screen-size responsiveness.
- One codebase adapts across phones, tablets, and desktops without device-specific pages
- Mobile-first min-width queries keep base CSS lean and layered
- Responds live to viewport resizing, not just at initial page load
- Supports accessibility preferences like prefers-reduced-motion and prefers-color-scheme
AI Mentor Explanation
A media query is like a groundskeeper switching the pitch setup based on the format being played — a shorter boundary for T20, a longer one for a Test match — automatically triggered by which format condition is currently active. The base setup is the default configuration, and specific format conditions layer on adjustments only when that format is in play. As the match format changes, the ground reconfigures live without anyone rebuilding it from scratch. That condition-triggered, live-adapting layout switch is exactly what a CSS media query does for screen size.
Step-by-Step Explanation
Step 1
Write mobile-first base styles
Define default CSS outside any media query, targeting the smallest/narrowest viewport.
Step 2
Add a min-width breakpoint
Wrap additional or overriding rules in @media (min-width: 768px) to layer on tablet/desktop adjustments.
Step 3
Combine conditions as needed
Use and/or/not to combine width, orientation, or user-preference features like prefers-color-scheme.
Step 4
Verify by resizing
Media queries re-evaluate live as the viewport changes, so resizing the browser is a valid way to test breakpoints.
What Interviewer Expects
- Correct @media syntax with a feature condition and enclosed CSS block
- Understanding of mobile-first (min-width) vs desktop-first (max-width) strategies
- Awareness that media queries cover more than screen size (prefers-color-scheme, prefers-reduced-motion)
- Knowledge that queries re-evaluate live on viewport resize, not just at load
Common Mistakes
- Writing desktop-first CSS with max-width overrides, causing bloated override chains
- Forgetting the viewport meta tag, which makes mobile browsers ignore actual device width
- Assuming media queries only handle screen width and not other conditions like color scheme
- Hardcoding many arbitrary breakpoints instead of choosing them based on content, not devices
Best Answer (HR Friendly)
“Media queries let a website change its styling based on things like screen size, so a layout that looks right on a phone can also look right on a laptop, using the same stylesheet. The common approach is to start with simple mobile styles and add more complex layout rules as the screen gets wider.”
Code Example
/* Base styles: mobile-first default */
.layout {
display: block;
padding: 12px;
}
/* Tablet and up */
@media (min-width: 768px) {
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 24px;
}
}
/* Respect user’s reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
}
}Follow-up Questions
- Why is mobile-first CSS generally preferred over desktop-first CSS?
- How do container queries differ from media queries?
- What role does the viewport meta tag play in making media queries work on mobile?
- How would you use prefers-color-scheme to implement automatic dark mode?
MCQ Practice
1. What does a mobile-first media query strategy typically use?
Mobile-first CSS starts with base styles for small screens and adds min-width queries for larger viewports.
2. Besides screen width, what else can a media query test?
Media queries can test accessibility and user preferences like color scheme and reduced motion, not just size.
3. When do media queries re-evaluate their conditions?
Media queries are live — resizing the browser window re-evaluates and reapplies matching styles immediately.
Flash Cards
What is the basic syntax of a media query? — @media (condition) { /* CSS rules */ }
Mobile-first uses which breakpoint type? — min-width, layering styles on for progressively wider viewports.
Do media queries only test screen size? — No — they can also test orientation, resolution, prefers-color-scheme, prefers-reduced-motion, and more.
When do media queries re-evaluate? — Continuously, live, whenever the tested condition (like viewport width) changes.