Media Query Generator

Generate responsive CSS media queries for different device sizes and orientations.

Media Query Settings

Media Type

Feature

Condition

Width (px)

768px

Device Presets

Generated Media Query

@media screen and (min-width: 768px) {
  /* Your CSS rules here */
}

Usage Example:

/* Example usage */
@media screen and (min-width: 768px) {
    body {
    font-size: 18px;
    padding: 20px;
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Common Breakpoints:

Mobile: 320px - 768px

Tablet: 768px - 1024px

Desktop: 1024px - 1440px

Large Desktop: 1440px+

Media Query Generator

Media Query Settings

Generated Media Query Copy CSS Reset

Generated Media Query