A CSS media query is a conditional statement that applies styles only when certain conditions about the user's device or browser are met. It's the foundation of responsive web design, allowing you to adapt layouts based on viewport width, height, orientation, resolution, color scheme preferences, and many other device characteristics. The basic syntax is @media [media-type] and (feature: value) { /* CSS rules */ }.

The most frequently used media features include: width / min-width / max-width (viewport width), height / min-height / max-height (viewport height), orientation (portrait or landscape), prefers-color-scheme (light or dark), hover (none or hover), pointer (none, coarse, or fine), resolution (dpi, dpcm, dppx), and prefers-reduced-motion (reduce or no-preference). Modern CSS also supports range syntax like (width >= 768px).

and combines multiple conditions that must ALL be true (logical AND). For example: @media screen and (min-width: 768px) and (max-width: 1024px) applies only when all three conditions are met. Comma (,) acts as a logical OR — if ANY of the comma-separated queries match, styles are applied. Example: @media screen, print matches either screen or print devices. The newer or keyword (Media Queries Level 4) works similarly to comma but within a single query: @media (min-width: 768px) or (orientation: landscape).

only is used to hide media queries from older browsers that don't support media features. An older browser sees only screen and ... and, not recognizing 'only', ignores the entire block. Modern browsers ignore the 'only' keyword and process the query normally. not negates the entire media query, applying styles when the query would NOT match. For example: @media not screen and (max-width: 600px) applies to everything EXCEPT screens narrower than 600px. Note that not inverts the entire query, not just the media type.

In mobile-first design, you write base styles for the smallest screens first, then use min-width queries to add complexity at larger breakpoints. Common breakpoints: @media (min-width: 576px) for small devices, @media (min-width: 768px) for tablets, @media (min-width: 992px) for desktops, and @media (min-width: 1200px) for large desktops. This approach ensures your site works on all devices and progressively enhances the experience on larger screens. Avoid using max-width as your primary strategy — it's harder to maintain and less future-proof.

Yes! The prefers-color-scheme media feature detects the user's system color theme. Use @media (prefers-color-scheme: dark) to apply dark mode styles, and @media (prefers-color-scheme: light) for light mode. You can also combine it with other conditions: @media screen and (prefers-color-scheme: dark) and (min-width: 768px). This feature is widely supported in all modern browsers and is essential for creating accessible, user-friendly websites that respect system preferences.

Common media query mistakes include: 1) Missing or mismatched parentheses — every media feature must be in its own parentheses. 2) Forgetting the colon between feature name and value, e.g., (min-width 768px) instead of (min-width: 768px). 3) Missing units on values — (min-width: 768) is invalid; it must be (min-width: 768px). 4) Using max-device-width (deprecated) instead of max-width. 5) Incorrect operator usage — and must connect complete feature queries. 6) Spelling errors in feature names like preferes-color-scheme. Our validator catches all these errors!

Media Queries Level 4 introduced range syntax using comparison operators, making queries more readable. Instead of (min-width: 768px) and (max-width: 1024px), you can write (768px <= width <= 1024px) or (width >= 768px) and (width <= 1024px). Supported operators include <, <=, >, >=, and =. This syntax is supported in all modern browsers (Chrome 104+, Firefox 102+, Safari 16.4+). It's especially helpful for complex range conditions and improves code readability significantly.