CSS Media Query Builder

Build CSS media queries visually. Choose conditions, combine them with AND/OR operators, and get production-ready @media rules. Use preset breakpoints for common devices or craft custom queries. Everything runs in your browser.

⚡ Preset Breakpoints
⚙ Build Query
● Live Preview
Query not matching
Inactive
This box reflects whether the media query matches your current viewport.
</> Generated CSS
@media (min-width: 768px) { /* Your styles here */ }
Ctrl+Enter Generate Ctrl+Shift+C Copy Ctrl+L Clear

How to Use This Tool

Click + Add Condition to build your media query piece by piece. Choose from screen width, height, orientation, color scheme, reduced motion, resolution, aspect ratio, or write a custom feature. Combine multiple conditions with AND or OR operators by clicking the colored badge between conditions.

Features

Mobile-First vs Desktop-First

In a mobile-first approach, you write base styles for small screens and use min-width media queries to add styles for larger screens. In a desktop-first approach, you write base styles for large screens and use max-width queries to override styles for smaller screens. Mobile-first is generally recommended because it leads to simpler CSS and better performance on mobile devices.

Modern Media Features

CSS media queries now support user preferences beyond screen size. Use prefers-color-scheme to detect dark or light mode, prefers-reduced-motion to respect users who have enabled reduced motion, and min-resolution: 2dppx to target high-DPI (Retina) displays. These features make your sites more accessible and user-friendly.

Related Resources

CSS Media Queries Complete Guide

CSS Grid Generator

CSS Units Converter

CSS Grid Cheat Sheet
Embed this tool on your site 
<iframe src="https://devtoolbox.dedyn.io/tools/css-media-query-builder" width="100%" height="800" frameborder="0"></iframe>

Frequently Asked Questions

What is a CSS media query and when should I use one?▼
A CSS media query is a conditional rule that applies styles only when certain conditions are met, such as the viewport being a specific width or the user preferring a dark color scheme. Media queries are the foundation of responsive web design. You use them to adapt layouts for different screen sizes (mobile, tablet, desktop), handle print stylesheets, detect user preferences like reduced motion or dark mode, and target specific device characteristics like orientation or resolution.
What are the most common CSS breakpoints for responsive design?▼
The most widely used CSS breakpoints are: 480px for small mobile devices, 768px for tablets in portrait mode, 1024px for tablets in landscape and small desktops, and 1440px for large desktop screens. However, modern best practice is to set breakpoints based on where your specific content breaks rather than targeting particular devices. Use min-width breakpoints for a mobile-first approach (recommended) or max-width breakpoints for a desktop-first approach.
How do I combine multiple conditions in a CSS media query?▼
You can combine multiple conditions in a CSS media query using the 'and' keyword, commas (which act as OR), and the 'not' keyword. For example, '@media screen and (min-width: 768px) and (max-width: 1024px)' targets screens between 768px and 1024px wide. Using a comma like '@media (max-width: 480px), (orientation: portrait)' matches either condition. You can also use the newer 'or' keyword in modern browsers. Combining conditions lets you create precise responsive rules.