Probador de Consultas CSS @media

Pega una consulta @media a la izquierda. La herramienta analiza cada condición, muestra un desglose en lenguaje natural y te dice si la consulta coincide con el viewport simulado. Una matriz de diez dispositivos (desde Galaxy Fold hasta QHD) muestra de un vistazo qué breakpoints se activan. Puramente del lado del cliente, sin subir nada.

El envoltorio @media es opcional. Se aceptan tanto (min-width: 768px) como screen and (min-width: 768px).

Veredicto —
Resumen en lenguaje natural

—

—

Desglose de condiciones

Aún no se han analizado condiciones.

Simulador de viewport

Preajustes comunes

Haz clic en un preajuste para cargarlo en el cuadro de consulta. Todos los preajustes se analizan correctamente.

Matriz de anchos de dispositivo

Para cada ancho de dispositivo canónico, la matriz muestra si la consulta actual coincide (asumiendo el mismo alto y valores de características que el simulador). Útil al elegir un breakpoint.

Dispositivo Ancho Coincide

Chuleta de características de medio

Un recordatorio de las características más útiles. Todo lo que no aparece se analiza pero no se evalúa en tiempo de ejecución (mostrará "no compatible" en la matriz).

width / min-width / max-width
Ancho del viewport en px CSS. Forma moderna de rango: (width <= 1024px).
height / min-height / max-height
Alto del viewport en px CSS.
aspect-ratio / min-aspect-ratio / max-aspect-ratio
Relación de aspecto del viewport como ancho/alto, p. ej. (aspect-ratio: 16/9).
resolution / min-resolution / max-resolution
Resolución del dispositivo. Unidades: dpi, dpcm, dppx.
orientation
landscape (ancho ≥ alto) o portrait.
prefers-color-scheme
light, dark o no-preference.
prefers-reduced-motion
reduce cuando el usuario ha pedido menos animación.
hover / any-hover
Si la entrada principal (o alguna) soporta hover.
pointer / any-pointer
Dispositivo de entrada principal: fine (ratón), coarse (táctil), none.
not / only
Prefijan la consulta: not print, only screen and ….