CSS Media Query Builder
Build responsive media queries from common width and device conditions.
Responsive breakpoints made simple
Media queries are how a layout responds to screen size, orientation, and preferences, but the syntax is easy to fumble. This builder assembles a valid @media query from common conditions — min/max width, orientation, and device features — so you get it right the first time.
Picking the conditions from controls removes the guesswork around parentheses and units. Set the condition you need and copy the media query wrapper, ready to hold the responsive styles for that breakpoint.
Copy-ready media query
The builder assembles valid min-width or max-width syntax so a stray parenthesis will not silently disable the query. Generated in your browser.
Frequently asked questions
Should I use min-width or max-width?
min-width suits mobile-first CSS: base styles for small screens, then queries that add layout as the screen grows. max-width suits desktop-first CSS that removes layout on smaller screens.
What does the color scheme option add?
An "and (prefers-color-scheme: dark)" or light condition, so the rules apply only when the width matches and the user's system is in that mode.
Can I use em instead of px for breakpoints?
Yes. em breakpoints, such as 48em for 768px at a 16px default, scale when users increase the browser's default font size, which keeps layouts from breaking.
Related tools
Practical utilities for front-end design and implementation work.