Mira qué media queries coinciden con tu pantalla ahora mismo, actualizadas al cambiar el tamaño. Sintaxis de rango, prefers-color-scheme, movimiento reducido, hover y pointer, breakpoints y container queries.
Una media query aplica CSS solo cuando se cumple una condición sobre el dispositivo o los ajustes del usuario. @media (width >= 48rem) { ... } apunta a pantallas más anchas; prefers-color-scheme, prefers-reduced-motion, hover y pointer describen ajustes y métodos de entrada. Escribe primero los estilos para pantallas pequeñas y luego añade queries min-width para diseños más grandes.
Las queries más usadas
El panel de abajo ejecuta dieciséis queries con window.matchMedia en tu propio navegador y se actualiza al cambiar el tamaño de la ventana, girar el móvil o activar el modo oscuro. Debajo encontrarás la sintaxis de rango, las queries de preferencias del usuario, las de método de entrada, los breakpoints de los frameworks y cuándo una container query es la mejor herramienta.
Una forma más corta de escribir condiciones de ancho con operadores de comparación: (width >= 600px) en lugar de (min-width: 600px), y (400px <= width < 900px) para una franja. Es compatible con todos los navegadores principales actuales; Safari la añadió en la 16.4 en 2023, así que consulta caniuse si das soporte a dispositivos antiguos.
Las hojas de estilo mobile-first usan min-width: los estilos base sirven a pantallas pequeñas y cada query añade diseño para las más anchas. Así el CSS para pantallas pequeñas se mantiene simple. max-width sirve para pequeñas excepciones, pero mezclar ambos en el mismo breakpoint puede dejar un hueco o solapamiento de un píxel; la sintaxis de rango con < y >= lo evita.
Usa @media (prefers-color-scheme: dark) y redefine dentro tus variables de color. En JavaScript, window.matchMedia('(prefers-color-scheme: dark)').matches da la misma respuesta, y su evento change se dispara cuando el usuario cambia de tema.
Las media queries miran el viewport y el dispositivo. Las container queries miran el tamaño de un elemento padre marcado con container-type. Una tarjeta que debe cambiar de diseño cuando su columna es estrecha, esté donde esté, necesita una container query.
Causas habituales: falta la etiqueta meta viewport, así que los móviles fingen tener unos 980px de ancho; la query está por encima de la regla que debería sobrescribir y pierde por orden en el código; o falta un espacio o un paréntesis, lo que invalida en silencio toda la condición.
Valores de la documentación oficial de Tailwind CSS v4 y Bootstrap 5. Los de Tailwind están en rem, mostrados aquí con el valor predeterminado de 16px.
Breakpoints predeterminados de dos frameworks populares (min-width, mobile first)
La sintaxis de rango se lee como matemáticas y facilita franjas sin solapamiento: < en un lado, >= en el otro.
Pequeños añadidos que hacen que un sitio se sienta nativo en cualquier dispositivo.
matchMedia devuelve un objeto con matches y un evento change. Es lo que usa el panel en vivo de esta página.
Cómo elegir entre ellas
Las dos tarjetas tienen el mismo marcado. Solo la ancha tiene espacio para pasar a un diseño en fila. Edita los anchos para ver el cambio.
Variantes de Tailwind v4 y el CSS que generan
Ancho
Más estrecho que sm de Tailwind (640px con el tamaño de fuente predeterminado)
Ancho
Entre sm y lg de Tailwind
Ancho
lg de Tailwind y superiores
Ancho
Breakpoint clásico de tablet, sintaxis antigua
Orientación
Viewport más alto que ancho
Orientación
Viewport más ancho que alto
Entrada
La entrada principal puede hacer hover (ratón, trackpad)
Entrada
La entrada principal es imprecisa (dedo)
Entrada
La entrada principal es precisa (ratón, lápiz)
Entrada
Al menos una entrada puede hacer hover
Preferencia
Sistema configurado en modo oscuro
Preferencia
El usuario pidió menos movimiento
Preferencia
El usuario pidió más contraste
Pantalla
Pantalla de alta densidad, 2x o más
Pantalla
Ejecutándose como web app instalada
Pantalla
Impresión o vista previa de impresión
Copiar coincidencias
Viewport: {size}. Cambia el tamaño de la ventana, gira el dispositivo o cambia el tema del sistema y la lista se actualiza.
midiendo...
{w} x {h} px CSS, densidad de píxeles {r}x
Resultados de media queries en vivo
Grupo
Query
Coincide cuando
Ahora
Sí
No
n/a significa que este navegador no pudo interpretar la query, algo que ocurre con la sintaxis de rango en versiones antiguas. ¿Necesitas tamaños exactos del dispositivo? Prueba la
herramienta de resolución de pantalla
Empieza gratis · Sin tarjeta de crédito