CSS Media Query Builder
Visually build responsive @media rules with live preview
@media screen and (min-width: 768px) {
/* your styles here */
}Click a preset to copy it to clipboard
Common Breakpoints Reference
| Device | Width | Media Query |
|---|---|---|
| Mobile (sm) | < 640px | @media (max-width: 639px) |
| Mobile (md) | < 768px | @media (max-width: 767px) |
| Tablet | 768px – 1023px | @media (min-width: 768px) and (max-width: 1023px) |
| Desktop | ≥ 1024px | @media (min-width: 1024px) |
| Large Desktop | ≥ 1280px | @media (min-width: 1280px) |
| XL Desktop | ≥ 1536px | @media (min-width: 1536px) |
About CSS Media Queries
Media queries let you apply CSS styles based on device characteristics like screen width, height, orientation, or user preferences. They are the backbone of responsive web design, allowing layouts to adapt to any screen size without JavaScript.
How to Use This Tool
Select a media type (screen, print, etc.), optionally add "not" or "only" modifiers, then add one or more feature conditions. Use the and/or operators to combine conditions. The live output panel updates instantly as you build.
Common Use Cases
Responsive layouts that adapt to mobile, tablet, and desktop screens. Dark mode support with prefers-color-scheme. Reduced-motion animations for accessibility. High-DPI/retina image targeting. Print-specific styles to hide navigation and ads.