midCSS
How do CSS Media Queries work for responsive design?
Updated Apr 28, 2026
Short answer
Media queries apply CSS rules only when specific device or viewport conditions are met.
Deep explanation
They evaluate logical conditions (like min-width, max-width, orientation, or user-preferences like prefers-color-scheme). A mobile-first approach uses min-width to progressively enhance styles as the screen gets larger.
Real-world example
Hiding a hamburger menu on desktop screens and displaying a full navigation bar instead.
Common mistakes
- Writing chaotic media queries instead of a structured mobile-first approach, leading to overlapping rules and specificity issues.
Follow-up questions
- What is the prefers-reduced-motion media query?