A media query is a CSS rule written with @media that wraps styles in a condition about the device or user preferences, such as viewport width, orientation, resolution, dark mode or reduced motion.
Why it matters
Media queries make a single stylesheet adapt to phones, tablets and desktops, which is the basis of responsive design. They also respect user settings like prefers-reduced-motion and prefers-color-scheme. Mobile traffic is large for most sites, so layouts that only work at desktop width lose visitors.
Example
.sidebar { display: none; }
@media (min-width: 900px) {
.sidebar { display: block; width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none; }
}The sidebar appears only on viewports 900px or wider.
Common mistakes
- Forgetting the viewport meta tag, so phones render the page at a desktop width and ignore your queries.
- Designing desktop first, then piling on max-width overrides that conflict.
- Choosing breakpoints for specific devices instead of where the content breaks.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.