toolsmoah

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: 480px
Tablet:481px - 768px
Desktop:min-width: 1024px
Large Desktop:min-width: 1200px
Media 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