Detailed explanation
CSS media queries apply styles only when specified conditions match the user's environment. They can test viewport width or height, orientation, and features such as hover capability or a preference for reduced motion. For responsive layouts, width queries are especially common: @media (min-width: 768px) matches when the viewport is at least 768 CSS pixels wide. This is the browser's available layout space, not necessarily the physical screen resolution. Media queries let one HTML document adapt its presentation without maintaining separate pages for different devices.
A mobile-first stylesheet starts with a usable layout for narrow screens outside any media query. These base rules typically use a single column, flexible widths, readable text, and controls that are easy to tap. Then min-width queries add or change styles as more space becomes available. For example, .card { width: 100%; } gives each card its container's full width. Inside @media (min-width: 768px), .card { width: 50%; } makes it half-width; inside @media (min-width: 1024px), width: 33.33% makes it roughly one-third. These widths alone do not arrange cards side by side: the parent still needs an appropriate layout, such as a wrapping flex container, with spacing accounted for.
Under the hood, the browser evaluates media-query conditions and includes matching declarations in the normal CSS cascade. At 1100px, both example queries match. If their declarations have equal cascade priority and specificity, the later rule wins, producing the one-third width. The browser reevaluates conditions when the viewport changes. A responsive page should also include <meta name="viewport" content="width=device-width, initial-scale=1.0"> so mobile browsers use the device width for the layout viewport rather than a wider virtual viewport.
Choose breakpoints where the content needs a layout change, rather than treating 768px and 1024px as mandatory device categories. Test between breakpoints, not only at them, and check for overflow, awkward wrapping, and inaccessible controls. Interviewers usually look for an understanding of conditional styling, base styles, min-width enhancement, and cascade behaviour—not just memorised breakpoint values.
Key points to remember
- Media queries conditionally apply CSS based on viewport dimensions or other environment features.
- Mobile-first CSS places narrow-screen styles outside media queries.
- Use min-width breakpoints to enhance layouts as available space increases.
- Matching media-query declarations still follow normal cascade rules.
- Choose content-driven breakpoints and include the viewport meta tag.
Common mistakes candidates make
- Writing desktop styles first and calling a set of max-width overrides mobile-first.
- Assuming percentage widths automatically create columns or leave room for gaps and padding.
- Treating breakpoints as fixed phone, tablet, and desktop categories instead of testing the actual content.
Likely follow-up questions
What is the difference between min-width and max-width media queries?
min-width matches at or above a specified viewport width, while max-width matches at or below it. Mobile-first styles usually use min-width to add enhancements; desktop-first styles often use max-width for narrower-screen overrides.
Do media queries increase selector specificity?
No, wrapping a rule in a media query does not increase its selector specificity. The query determines whether the rule participates in the cascade; normal cascade rules then decide which declaration wins.
Can responsive layouts work without media queries?
Yes, flexible widths, Flexbox wrapping, and CSS Grid patterns such as repeat(auto-fit, minmax(...)) can adapt layouts automatically. Media queries are useful when you need explicit changes, such as switching navigation layouts or adjusting styles for reduced-motion preferences.
Interview tip: Explain base styles first, show two min-width enhancements, and describe which rules apply when both queries match.