CSS · Layout and visual systems
How do media queries work?
Short answer
Media queries apply blocks of CSS when the environment matches a condition, such as viewport width, orientation, color scheme or motion preference. They respond to the viewport, not to an individual component.
A media query wraps rules or is used with @import. Conditions can combine with and, or and not. Modern syntax also supports range comparisons such as width >= 48rem, which reads more naturally than min-width.
@media (min-width: 48rem) {
.layout {
grid-template-columns: 16rem 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.card {
transition: none;
}
}What you can query
- Viewport width and height, including range syntax
- Orientation and aspect ratio
- Pointer and hover capabilities
- User preferences such as prefers-color-scheme and prefers-reduced-motion
- Resolution and display characteristics
Breakpoints should be chosen where the content breaks, not where a particular device happens to be. Start from a narrow layout and add a breakpoint when the design stops working.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between min-width and max-width queries?
- 2How do you respect reduced motion preferences?
- 3Why should breakpoints be content-based?
- 4When would you use a container query instead?
Say it in the interview
Media queries apply CSS conditionally based on the environment, most commonly viewport width, but also orientation, pointer type, color scheme and reduced motion. I choose breakpoints where the layout actually breaks rather than targeting devices. They respond to the viewport, so for a reusable component inside different containers I reach for container queries instead.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.