Viewport Media Query Generator
Generate CSS media queries for responsive web design.
Media Query Settings
Configure media query conditions
Condition 1
Presets
Choose commonly used media query patterns
Generated CSS
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}Common Breakpoints
Mobile:
max-width: 480pxTablet:
481px - 768pxDesktop:
min-width: 1024pxLarge Desktop:
min-width: 1200pxMedia Query Guide
Key Media Features
- • width/height: Viewport width/height
- • min-width/max-width: Minimum/maximum width conditions
- • orientation: Screen orientation (portrait/landscape)
- • resolution: Screen resolution (retina displays, etc.)
- • hover: Hover capability support
- • pointer: Pointer precision (touch/mouse)
Usage Tips
- • Mobile First approach: Use min-width to design from small screens
- • Combine complex conditions with logical operators
- • Use print media type for separate print styles
- • Use resolution for high-resolution display support