Media queries en CSS explicadas, con ejemplos para móvil

Una media query de CSS aplica un bloque de estilos solo cuando el dispositivo o el navegador cumple una condición, como un ancho mínimo del viewport, la orientación horizontal o un esquema de color oscuro. @media (min-width: 48rem) { ... } significa “usa estas reglas cuando el viewport mida al menos 48rem de ancho”. Las media queries son la parte de CSS que permite que una misma página cambie su diseño entre teléfonos, tablets y ordenadores.

Sintaxis básica

@media (min-width: 768px) {
  .sidebar { display: block; }
}

Una media query tiene tres partes opcionales:

• un tipo de medio: screen, print o all (por defecto);
• una o varias características de medio entre paréntesis, como (min-width: 768px) u (orientation: landscape);
• operadores lógicos que las combinan: and, , (o) y not.

@media screen and (min-width: 768px) and (orientation: landscape) { ... }
@media (max-width: 480px), (orientation: portrait) { ... }
@media not print { ... }

También puedes aplicar una media query a toda una hoja de estilos: <link rel="stylesheet" href="print.css" media="print">.

min-width frente a max-width

min-width significa “este ancho o más”; max-width, “este ancho o menos”. La dirección que elijas decide cómo escribes el resto del CSS.

• Mobile first (recomendado): los estilos base apuntan al móvil y las queries min-width añaden el diseño para pantallas más grandes. Consulta diseño mobile first.
• Desktop first: los estilos base apuntan al escritorio y las queries max-width deshacen cosas para pantallas pequeñas.

/* Mobile first */
.nav { flex-direction: column; }

@media (min-width: 48rem) {
  .nav { flex-direction: row; }
}

Mezclar las dos direcciones en un mismo proyecto suele crear solapamientos y huecos. Elige una y usa la otra solo para pequeñas excepciones.

La sintaxis moderna de rangos

Media Queries Level 4 añade operadores de comparación, que se leen mejor y evitan errores de un píxel:

@media (width >= 48rem) { ... }
@media (40rem <= width < 64rem) { ... }

La sintaxis de rangos funciona en todos los navegadores principales actuales (Chrome y Edge desde la versión 104, Firefox desde la 63, Safari desde la 16.4). Si necesitas dar soporte a versiones antiguas de Safari, sigue usando min-width y max-width, o deja que una herramienta de build haga la conversión.

Ten en cuenta que (width < 768px) y (max-width: 767px) no son idénticas: la primera también coincide con 767,5 px, algo que puede ocurrir en pantallas con densidades de píxeles fraccionarias.

Media queries para móvil: ejemplos habituales

Apilar columnas en pantallas pequeñas:

.grid { display: grid; gap: 1rem; }

@media (min-width: 40rem) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

Menos espaciado en el móvil:

.section { padding: 2rem 1rem; }

@media (min-width: 64rem) {
  .section { padding: 6rem 2rem; }
}

Móviles en horizontal con poca altura:

@media (orientation: landscape) and (max-height: 30rem) {
  .site-header { position: static; }
}

Este último se olvida a menudo. Una cabecera fija que queda bien en vertical puede ocupar un tercio de la pantalla en horizontal.

Qué anchos usar es otra cuestión, que tratamos en breakpoints responsive.

Características de medio más allá del ancho

Las características hover y pointer importan más de lo que parece. Un portátil táctil o una tablet con un diseño de ancho de escritorio siguen sin hover, así que protege los menús que solo funcionan con hover con @media (hover: hover).

Usa rem o em en los breakpoints

Las media queries en rem o em siguen el tamaño de fuente configurado por el usuario en el navegador. Si alguien sube su tamaño de texto por defecto de 16 px a 24 px, un breakpoint de 48rem pasa de 768 px a 1152 px, de modo que el diseño cambia a una versión más holgada cuando el texto crece. Los breakpoints en píxeles ignoran ese ajuste. Dentro de las media queries, rem y em se refieren al tamaño de fuente inicial del navegador, no al tamaño de html que definas en CSS.

Media queries frente a container queries

Las media queries responden al viewport. Las container queries responden al tamaño del contenedor de un elemento:

.card-wrap { container-type: inline-size; }

@container (min-width: 30rem) {
  .card { display: flex; }
}

Usa media queries para el diseño general de la página (columnas, navegación) y container queries para componentes que aparecen en lugares de anchos distintos.

Errores comunes

1. Falta la etiqueta meta viewport. Sin ella, los teléfonos informan de un viewport de unos 980 px y tus media queries móviles nunca se activan. Consulta la etiqueta meta viewport explicada.
2. Rangos que se solapan, como max-width: 768px y min-width: 768px, que coinciden ambos justo en 768 px.
3. Escribir la media query antes de la regla base. Con la misma especificidad gana la regla posterior, así que la query debe ir después de la regla que sobrescribe.
4. Probar solo redimensionando la ventana. Los navegadores de escritorio no se estrechan hasta el ancho de la mayoría de teléfonos. Usa el modo dispositivo o Mobile View Extension, que define el viewport y el user agent reales, y lee cómo probar un diseño responsive.

Preguntas frecuentes

¿Cuál es la media query para teléfonos móviles?

No hay una única query para móviles. El CSS mobile first trata el teléfono como caso por defecto, sin query, y añade @media (min-width: 40rem) o similar para pantallas más grandes. Para apuntar solo a pantallas pequeñas, usa @media (max-width: 39.99rem) o (width < 40rem).

¿Las media queries deben usar px, em o rem?

rem o em es mejor para la accesibilidad, porque así los breakpoints se adaptan al tamaño de fuente del usuario. px funciona, pero ignora ese ajuste.

¿Dónde pongo las media queries en mi CSS?

Junto al componente que modifican o agrupadas al final del archivo. Junto al componente es más fácil de mantener, y en cualquier caso deben ir después de las reglas base.