Sintaxis y puntos de ruptura habituales

Una media query contiene reglas CSS y las aplica solo cuando se cumple una condición. La sintaxis básica:

Los tipos de medios más comunes:

• all — se aplica a todos los dispositivos de salida (valor predeterminado)
• screen — pantallas de ordenadores y teléfonos
• print — para la vista previa de impresión y la impresión
• speech — lectores de pantalla

Las características de medios describen las propiedades del dispositivo o del viewport. Entre las más comunes se encuentran: width, height, orientation, resolution, prefers-color-scheme y hover.

La característica más utilizada: selecciona pantallas con un ancho igual o superior a un umbral. Enfoque mobile-first.

No existen breakpoints universalmente correctos. Un conjunto habitual basado en anchos de dispositivos comunes:

• 480px — teléfonos grandes
• 768px — tabletas
• 1024px — ordenadores de escritorio pequeños y tabletas en orientación horizontal
• 1280px — ordenadores de escritorio estándar
• 1536px — ordenadores de escritorio grandes

En lugar de usar breakpoints basados en dispositivos, la práctica moderna establece breakpoints cuando el contenido deja de ajustarse. Diseñe para un tamaño, cambie el tamaño y añada un breakpoint cuando el diseño empiece a verse mal.

El CSS moderno admite la sintaxis de rangos dentro de las media queries, que resulta más legible que combinar min y max:

Use and para exigir que se cumplan varias condiciones simultáneamente:

Use not para negar una media query. Se aplica a todo lo que NO coincida con la consulta:

Separe varias consultas con comas, como si fueran una lista de selectores. Los estilos se aplican si coincide CUALQUIER consulta.

Usar unidades em para los breakpoints, en lugar de px, hace que se ajusten a la preferencia de tamaño de fuente del navegador del usuario y mejora la accesibilidad.

¿Qué media query coincide con pantallas de al menos 1024px de ancho?

Las media queries aplican CSS de forma condicional según las características del dispositivo o del viewport. Use min-width con un enfoque mobile-first y max-width con un enfoque desktop-first. Establezca los breakpoints donde los necesite el contenido, no en tamaños de dispositivo arbitrarios. La sintaxis moderna de rangos mejora la legibilidad.