Choose Framework Breakpoints
Select Breakpoints to Generate
Generated CSS
/* Your media queries will appear here */
📋 Media Query Cheatsheet
Common Device Breakpoints
| Device |
Width |
Media Query |
| 📱 Mobile S |
320px |
@media (min-width: 320px) |
| 📱 Mobile M |
375px |
@media (min-width: 375px) |
| 📱 Mobile L |
425px |
@media (min-width: 425px) |
| 📱 Tablet |
768px |
@media (min-width: 768px) |
| 💻 Laptop |
1024px |
@media (min-width: 1024px) |
| 🖥️ Desktop |
1440px |
@media (min-width: 1440px) |
| 🖥️ 4K |
2560px |
@media (min-width: 2560px) |
Special Media Features
| Feature |
Use Case |
Code |
| Dark Mode |
User prefers dark theme |
@media (prefers-color-scheme: dark) |
| Light Mode |
User prefers light theme |
@media (prefers-color-scheme: light) |
| Reduced Motion |
Accessibility - less animation |
@media (prefers-reduced-motion: reduce) |
| Retina Display |
High resolution screens |
@media (-webkit-min-device-pixel-ratio: 2) |
| Hover Capable |
Device can hover (not touch) |
@media (hover: hover) |
| Touch Device |
Device cannot hover |
@media (hover: none) |
| Portrait |
Vertical orientation |
@media (orientation: portrait) |
| Landscape |
Horizontal orientation |
@media (orientation: landscape) |
| Print |
When printing page |
@media print |