CSS media query builder
Pick the conditions you need and get a ready @media rule plus the matching window.matchMedia call. A line under the result tells you whether the query matches your current window.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose a media type. Use
screen to leave print styles alone, or all to apply everywhere.
- Enter a minimum width, a maximum width, or both, and pick the unit.
- Add orientation, color scheme, motion or hover conditions if you need them.
- Copy the CSS rule, or the JavaScript line that tests the same query.
How it works
Each choice becomes a condition in parentheses and the conditions are joined with and. The type comes first when it is not all. The JavaScript line passes the same text to window.matchMedia, and the “matches now” line asks the browser the same question for your window.
Example
Minimum 600px, maximum 900px and screen produce @media screen and (min-width: 600px) and (max-width: 900px). In the range syntax the same query is screen and (600px <= width <= 900px).
Tips
- Prefer a few breakpoints based on where your layout breaks rather than on device sizes.
- A query with a minimum above the maximum can never match, so the tool reports an error.
Frequently asked questions
How do I write a mobile-first media query?
Write the base styles for small screens and add rules with min-width for larger ones, for example (min-width: 600px). Leave the max-width field empty.
Are min-width and max-width inclusive?
Yes. (min-width: 600px) matches at 600px and above, and (max-width: 600px) matches at 600px and below, so both match at exactly 600px. To avoid the overlap, use 599.98px as the upper bound of a lower range.
What do em and rem mean in a media query?
In a media query both are relative to the browser's initial font size, usually 16px, and ignore font sizes set in your CSS. That is why 40em equals 640px by default and also follows the user's browser font setting.
Which syntax should I use for width?
The min-width and max-width form works everywhere. The range form, such as (600px <= width <= 900px), is shorter and uses the newer Media Queries Level 4 syntax, so check support for the browsers you target.
What do the user preference conditions do?
prefers-color-scheme matches the system light or dark setting, and prefers-reduced-motion: reduce matches visitors who asked for less animation. Both let you respect those choices without JavaScript.