What are CSS media queries and how do they enable responsive design?
Learn what CSS media queries are and how they enable responsive design with breakpoints, min-width, mobile-first strategy, and practical code examples.
Expected Interview Answer
CSS media queries are conditional rules that apply styles only when the device or viewport meets given criteria, such as a minimum width, allowing one stylesheet to adapt a layout across phones, tablets, and desktops.
A media query uses the @media rule with a media type (like screen) and one or more feature conditions (like min-width, max-width, orientation, or prefers-color-scheme). When the condition evaluates true for the current viewport, the enclosed CSS takes effect, enabling responsive design where breakpoints reflow columns, resize text, and hide or show elements. Combined with fluid units, flexible grids, and a mobile-first approach using min-width, media queries let a single codebase serve every screen.
- One codebase adapts to all screen sizes
- Better usability and readability on mobile
- Supports mobile-first, progressive enhancement
- Can respond to orientation, resolution, and user preferences
- Improves accessibility and SEO through responsive layouts
AI Mentor Explanation
Media queries are like a captain changing field placements based on the match situation: powerplay overs demand attacking positions, death overs need boundary protection. The rules stay the same, but the arrangement adapts to conditions. Just as the field reshapes for a T20 versus a Test, media queries reshape a layout for a phone versus a wide monitor, applying different styles only when the viewport conditions are met.
Step-by-Step Explanation
Step 1
Set the viewport meta tag
Add <meta name="viewport" content="width=device-width, initial-scale=1"> so mobile browsers report the real device width.
Step 2
Design mobile-first
Write base styles for the smallest screen, then layer enhancements upward using min-width media queries.
Step 3
Choose breakpoints
Pick breakpoints based on content and common device widths rather than specific phone models.
Step 4
Write the @media rule
Wrap responsive overrides in @media (min-width: 768px) { ... } so they apply only above that width.
Step 5
Test across devices
Resize the browser and use device emulation to verify layouts reflow cleanly at every breakpoint.
What Interviewer Expects
- Correct @media syntax with media type and feature conditions
- Understanding min-width versus max-width
- Knowledge of the mobile-first approach
- Awareness of the viewport meta tag's role
- Examples of features like orientation and prefers-color-scheme
Common Mistakes
- Omitting the viewport meta tag and wondering why mobile styles fail
- Mixing min-width and max-width breakpoints inconsistently
- Using device-specific pixel widths as breakpoints
- Forgetting that later matching queries can override earlier ones
- Believing media queries alone make a page responsive without fluid units
Best Answer (HR Friendly)
“Media queries are CSS rules that switch on only when the screen meets certain conditions, like being at least a tablet's width. They let one website rearrange itself to look good on phones, tablets, and desktops without needing separate versions.”
Code Example
/* Base styles: mobile first, single column */
.container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
/* Tablet and up: two columns */
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
/* Desktop and up: three columns */
@media (min-width: 1200px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}
/* Respect dark mode preference */
@media (prefers-color-scheme: dark) {
body { background: #111; color: #eee; }
}Follow-up Questions
- What is the difference between min-width and max-width queries?
- Why is the viewport meta tag necessary for responsive design?
- What is a mobile-first versus desktop-first strategy?
- How do container queries differ from media queries?
- How can prefers-reduced-motion improve accessibility?
MCQ Practice
1. Which rule starts a media query?
The @media at-rule introduces a media query, followed by a media type and feature conditions.
2. In mobile-first design, which feature is typically used?
Mobile-first writes base styles for small screens and layers enhancements upward with min-width queries.
3. Which tag is required for media queries to work correctly on mobile?
The viewport meta tag makes mobile browsers report the true device width so breakpoints trigger properly.
Flash Cards
What is a media query? — A conditional @media rule that applies CSS only when device/viewport conditions are met.
min-width vs max-width? — min-width applies at or above a width (mobile-first); max-width applies at or below (desktop-first).
Why the viewport meta tag? — It makes mobile browsers use the real device width instead of a zoomed-out default.
A non-size media feature? — prefers-color-scheme, orientation, resolution, or prefers-reduced-motion.