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.
यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.