CSS Media Queries Generator
Current viewport: x | Orientation: | Color scheme:
Device Presets
Build Query
Active Queries
Generated CSS
/* Add media queries to generate CSS */
Responsive Design Cheatsheet
| Breakpoint | Target | Query |
|---|---|---|
| 320px | Small phones | @media (max-width: 320px) |
| 480px | Large phones | @media (max-width: 480px) |
| 768px | Tablets | @media (min-width: 768px) |
| 1024px | Small desktops | @media (min-width: 1024px) |
| 1280px | Large desktops | @media (min-width: 1280px) |
| 1536px | Extra large | @media (min-width: 1536px) |
| Feature | Values | Use Case |
|---|---|---|
| orientation | portrait, landscape | Device rotation |
| prefers-color-scheme | dark, light | OS theme preference |
| prefers-reduced-motion | reduce, no-preference | Accessibility |
| hover | hover, none | Touch vs mouse |
| pointer | fine, coarse, none | Input precision |
| - | Print stylesheets |