media queries — Frontend Classroom

Una media query es una at-rule de CSS que aplica un bloque de estilos solo cuando se cumple una condición sobre el entorno del documento: el ancho del viewport, la orientación de la pantalla, la preferencia de esquema de colores del sistema operativo. Es la herramienta para los cambios de layout explícitos en diseño responsive — cuando el layout necesita pasar de una columna a dos, de un menú vertical a uno horizontal, de un sidebar oculto a uno visible.

La forma más usada en la práctica es @media (min-width: N): aplica el bloque de CSS cuando el viewport tiene al menos N píxeles de ancho. Es la base del enfoque mobile-first: se escriben los estilos de móvil fuera de cualquier media query, y se usan media queries con min-width para expandir el layout en pantallas más grandes. Esto hace que el CSS refleje cómo el layout crece con el espacio disponible, no cómo se reduce.

Las media queries no son la única herramienta responsive — para valores que deben escalar suavemente entre un mínimo y un máximo, clamp() es más elegante y no requiere breakpoints. Pero cuando el layout necesita un cambio categórico (de flex-direction: column a row, de una columna de texto a dos, de nav oculto a nav visible), la media query es la herramienta correcta.

Cómo funciona

Sintaxis básica

@media (min-width: 768px) {
  /* Este bloque aplica cuando el viewport tiene 768px o más */
  .sidebar {
    display: block;
  }
}

La estructura tiene tres partes: la at-rule @media, la condición entre paréntesis, y el bloque de declaraciones que aplica cuando la condición es verdadera. Cuando la condición deja de cumplirse (el usuario achica la ventana), los estilos dentro del bloque se desactivan y vuelven a dominar los estilos base.

Mobile-first con `min-width`

En el enfoque mobile-first los estilos base no tienen media query — aplican a cualquier tamaño, incluido el móvil. Las media queries con min-width agregan estilos a medida que el viewport crece:

/* Estilos base — mobile (aplican siempre) */
.nav {
  display: flex;
  flex-direction: column;
}

/* Tablet en adelante (768px+) */
@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Desktop (1200px+) */
@media (min-width: 1200px) {
  .nav {
    max-width: 1200px;
    margin: 0 auto;
  }
}

La alternativa desktop-first usa @media (max-width: …) para reducir el layout en móvil. Funciona, pero produce CSS donde los estilos de mobile son overrides de los de desktop — la cascada trabaja en el sentido inverso al crecimiento del layout, y mantener el código se vuelve más confuso.

Combinaciones con `and`

Se pueden combinar condiciones con and para aplicar estilos solo dentro de un rango:

/* Solo entre 600px y 1200px */
@media (min-width: 600px) and (max-width: 1200px) {
  .elemento { font-size: 1.25rem; }
}

En mobile-first puro se evitan los rangos y se apila de menor a mayor: cada @media (min-width: …) agrega o sobreescribe lo anterior. Los rangos son útiles cuando se necesita un estilo específico solo para tablets sin que aplique en desktop.

Breakpoints por contenido, no por dispositivo

El error más común es elegir breakpoints por modelo de dispositivo: 768px porque es un iPad, 1024px porque es un portátil. Ese enfoque se desactualiza rápido — hay infinita variedad de tamaños reales.

La práctica correcta es elegir el breakpoint donde el layout se rompe o se ve mal: estirar el viewport lentamente desde mobile hasta desktop, observar dónde el contenido empieza a verse incómodo, y poner el breakpoint ahí. El breakpoint pertenece al contenido, no al dispositivo.

Media queries de características del usuario

Además del ancho, las media queries pueden detectar preferencias del sistema:

/* El usuario prefiere esquema oscuro */
@media (prefers-color-scheme: dark) {
  body { background: #0f172a; color: #f1f5f9; }
}

/* El usuario prefiere reducir animaciones */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

prefers-color-scheme es la base de los temas claro/oscuro automáticos. prefers-reduced-motion es una práctica de accesibilidad importante para usuarios con epilepsia fotosensible o que experimentan mareo con animaciones. Ambas son soporte Baseline widely.

Media types

Las media queries también admiten tipos de medio antes de la condición: @media screen, @media print. En la práctica moderna se omiten — sin tipo especificado aplica a all. El caso de uso real que queda es @media print { … } para ocultar elementos de navegación al imprimir.

Cuándo usar media queries vs. otras herramientas

Situación	Herramienta
Cambio de layout categórico (columna → fila, sidebar oculto → visible)	`@media (min-width: …)`
Valor que escala suavemente entre un mínimo y un máximo	`clamp()`
Imagen que no desborda su contenedor	`max-width: 100%`
Grid que reordena columnas automáticamente	`grid-template-columns: repeat(auto-fit, minmax(…))`
Tema claro/oscuro según preferencia del sistema	`@media (prefers-color-scheme: …)`

Notas, gotchas e interacción

Sin el meta viewport, las media queries de min-width no funcionan en móvil. El navegador simula un viewport de ~980px y las condiciones de min-width pueden cumplirse siempre o nunca, independientemente del tamaño real de la pantalla. Ver <meta>.
Las media queries miden el viewport, no el contenedor. Dentro de una columna angosta en un layout de grid, una media query de min-width: 768px se dispara si el viewport tiene 768px — aunque el elemento solo tenga 300px de ancho. Para esto existe @container (Container Queries), pero está fuera del alcance de esta entrada.
El orden en el CSS importa. En mobile-first, los @media (min-width: …) deben ir después de los estilos base que sobreescriben. Si están antes, la cascada los pisa. Se recomienda ordenar de menor a mayor breakpoint.
No es necesario cubrir todos los dispositivos. Con mobile-first y buenas unidades relativas, muchos componentes funcionan bien sin ninguna media query. Las media queries son para los quiebres reales, no para “soportar cada tamaño”.
@media (min-width: 0px) es equivalente a no tener media query. No existe “mobile media query” — el estilo mobile va fuera de cualquier @media.

Vigente / legacy

Las media queries son vigentes y soporte universal. La forma legacy — @media screen and (min-device-width: …) con min-device-width — está obsoleta: medía el ancho del dispositivo físico, no del viewport, y daba resultados inconsistentes. Hoy se usa siempre min-width/max-width (viewport).

Aprendelo en el recorrido

Esta entrada complementa la lección Media queries y breakpoints por contenido del módulo Diseño responsive.

Ver también

responsive — diseño responsive: el panorama completo, mobile-first y el toolkit
clamp() — alternativa fluida a las media queries para valores continuos
unidades — vw, %, rem como base del layout sin media queries
meta — el <meta name="viewport"> sin el que las media queries no funcionan en móvil