Constructor de media queries CSS

Construye consultas @media y @supports visualmente

Current Window: 1024px (MATCHED)

Responsive Breakpoints & Media Features

Standard Tailwind Breakpoint Presets:

min-width (px):

max-width (px):

Orientation:

Color Scheme:

Reduced Motion:

Generated Query & Status

Media Query Header:

@media (min-width: 768px)

Active Browser Match

Current viewport of 1024px matches this media rule.

Standard CSS @media Rule

/* Responsive Breakpoint Rule */
@media (min-width: 768px) {
  .responsive-container {
    padding: 2rem;
    font-size: 1.125rem;
  }
}

JavaScript window.matchMedia Listener

// JavaScript / React matchMedia Hook
const mediaQuery = window.matchMedia('(min-width: 768px)');

function handleMediaChange(e: MediaQueryListEvent | MediaQueryList) {
  if (e.matches) {
    console.log('Breakpoint matched');
  }
}

mediaQuery.addEventListener('change', handleMediaChange);
handleMediaChange(mediaQuery);

Tailwind CSS Responsive Utilities

// Tailwind Responsive Breakpoint Equivalent
<div className="min-[768px]:p-8 ">
  Responsive Content
</div>