Media Query Generator
Create CSS media queries for responsive web design with common breakpoints and features.
Query Builder
Mobile First (sm)
Tablet (md)
Desktop (lg)
Large Desktop (xl)
Dark Mode
Light Mode
Reduced Motion
Print
Generated Query
@media screen and (min-width: 768px) {
/* styles here */
}Device Reference
Mobile S
320pxMobile M
375pxMobile L
425pxTablet
768pxLaptop
1024pxLaptop L
1440px4K
2560pxTailwind Breakpoints
sm: 640pxmd: 768pxlg: 1024pxxl: 1280px2xl: 1536px💡
Help us improve!
How would you rate the Media Query Generator?
Editorial Note
MyCalcBuddy Editorial Team
This page is maintained as an educational calculator reference.
📚
Formula Source: Standard Mathematical References
by Various
🔄Last reviewed: May 2026
✓Formula checks are based on standard references and internal QA review.