Frontend interview answer

What are media queries and why are they used?

HighIntermediateCss

By FrontendAtlas Editorial · Updated Apr 4, 2026

Interview quick answer

Use media queries as a production breakpoint strategy: adapt layouts, respect user preferences, and avoid responsive pitfalls caused by viewport-only thinking.

Interview focus

This CSS interview question tests whether you can explain CSS media queries: breakpoint strategy, user preferences, and pitfalls, connect it to production trade-offs, and handle common follow-up questions.

CSS media queries: breakpoint strategy, user preferences, and pitfalls explanation without falling back to memorized definitions
Responsive and Media Queries reasoning, edge cases, and production failure modes
How you would answer the most likely CSS interview follow-up

Practice more CSS interview questions

Interview answer drill

Use this CSS interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice more CSS interview questions Follow 7-day crash study plan Open Essential 60

Full interview answer

Overview

Media queries are not just responsive CSS trivia. In production they define your breakpoint strategy, user-preference handling, and fallback rules when layouts change across devices. Strong answers talk about mobile-first defaults, pitfalls like overfitting to a few screen widths, and when viewport queries should give way to container queries.

Feature	Example	Purpose
min-width	@media (min-width: 768px)	Applies when the viewport is at least 768px wide.
max-width	@media (max-width: 600px)	Applies when the viewport is 600px wide or less.
orientation	@media (orientation: landscape)	Applies styles for landscape or portrait mode.
resolution	@media (min-resolution: 300dpi)	Targets high-resolution (Retina) displays.

Common media query conditions

Example: Responsive Layout

CSS

body {
  font-size: 16px;
}
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

This example adjusts the text size for tablets and mobile screens, improving readability on smaller devices.

Combining Conditions
Media queries can combine multiple conditions using logical operators:

and – combine features (@media (min-width: 600px) and (orientation: landscape)).
not – exclude specific conditions.
only – prevent older browsers from applying the rule.

Mobile-First Approach
Modern best practice is to start with default (mobile) styles and add media queries for larger viewports. This ensures faster rendering and fewer overrides:

@media (min-width: 768px) { /* tablet styles */ }
@media (min-width: 1024px) { /* desktop styles */ }

Advanced Features

Media queries support prefers-color-scheme for dark/light mode.
prefers-reduced-motion helps accessibility by disabling animations for users who prefer reduced motion.
Container queries (in modern browsers) extend this concept to parent element widths rather than the viewport.

Practice next
Use the CSS theme variables coding challenge to apply prefers-color-scheme with custom properties and a manual dark-mode override. For a layout-focused breakpoint drill, try the CSS Grid minmax() card gallery challenge and explain the required min-width: 1024px switch.

Still so complicated?

Think of media queries as smart CSS switches — they turn on or off specific styles depending on the screen’s size or features, just like adaptive headlights adjusting to road conditions.

Summary

Media queries adapt designs to different screen sizes and device capabilities.
Essential for responsive design and accessibility.
Support conditions like width, orientation, resolution, and user preferences.
Combine with a mobile-first strategy for performance and scalability.