Generated Media Query

@media (max-width: 768px) {
  /* Your styles here */
  .container {
    padding: 1rem;
  }
}

Viewport Preview

Preview Element

Framework Presets

Media Query Best Practices

  • Mobile-First: Start with mobile styles, use min-width for larger screens.
  • Feature Queries: Use @supports with media queries for progressive enhancement.
  • Reduced Motion: Always respect prefers-reduced-motion for accessibility.
  • Breakpoint Selection: Choose breakpoints based on content, not devices.
  • Combine Conditions: Use "and" for all conditions, comma for any condition.
  • Print Styles: Use @media print for print-specific styles.
  • Container Queries: Consider @container for component-level responsiveness.