Una Media Query es una regla condicional de CSS que aplica estilos cuando el dispositivo cumple ciertas características, como tener un ancho de pantalla determinado.
Son una de las bases más importantes del diseño responsive. Gracias a ellas, podemos tener un único archivo HTML y decirle al navegador que pinte las cosas de forma distinta si lo estamos viendo en un monitor grande o en un teléfono móvil estrecho.
La sintaxis de @media
Para aplicar estas condiciones, utilizamos la directiva @media seguida de una “pregunta” entre paréntesis. Si el navegador comprueba que la respuesta a esa pregunta es verdadera, aplicará todas las reglas CSS que hayamos metido dentro de sus llaves.
/* 1. Estilos base para todo el mundo */
.caja-noticia {
background-color: lightblue;
width: 100%;
}
/* 2. La condición especial */
@media (min-width: 800px) {
/* Esto SOLO se aplicará si la pantalla mide 800px o más */
.caja-noticia {
background-color: darkblue;
color: white;
}
}
Las Media Queries no “borran” el CSS anterior, sino que lo sobrescriben. En el ejemplo de arriba, la .caja-noticia siempre tendrá width: 100%, porque la Media Query solo ha pisado el color de fondo y el del texto.
Enfoque max-width vs min-width
A la hora de plantear nuestro diseño adaptable, tenemos dos enfoques diametralmente opuestos para escribir nuestras condiciones. Elegir uno u otro cambiará por la forma en la que estructuráis vuestro archivo CSS (y vuestra cabeza).
Históricamente, los desarrolladores empezaban diseñando la página para el ordenador de escritorio (que era lo normal).
Luego, vas añadiendo reglas con max-width para “romper” y encoger el diseño a medida que la pantalla se hacía más pequeña.
/* Diseño base para ORDENADOR */
.menu { display: flex; flex-direction: row; }
/* Si la pantalla es un MÓVIL (600px o menos), lo cambiamos */
@media (max-width: 600px) {
.menu { flex-direction: column; }
}
Hoy en día, el paradigma ha cambiado por completo. Como la mayoría del tráfico web viene de teléfonos móviles, lo estándar es diseñar primero para la pantalla pequeña (que además es lo más difícil por la falta de espacio).
Luego vas expandiendo hacia monitores grandes usando min-width.
/* Diseño base para MÓVIL (El recomendado) */
.menu { display: flex; flex-direction: column; }
/* Si la pantalla es un ORDENADOR (768px o más), lo expandimos */
@media (min-width: 768px) {
.menu { flex-direction: row; }
}
En general, os aconsejarán que en la actua adoptéis la mentalidad Mobile First.
Yo no estoy necesariamente de acuerdo, depende del proyecto. Pero sí debéis conocer ambas formas de trabajar, y elegir una u otra en función de lo que necesitéis.
Los breakpoints no son modelos de móvil
Un error muy común es elegir puntos de corte pensando en dispositivos concretos: “móvil mide tanto”, “tablet mide esto”, “portátil mide aquello”. El problema es que hay miles de tamaños, densidades, zooms y orientaciones.
Lo mejor es añadir un breakpoint cuando el diseño lo pide, no cuando el dispositivo lo pide.
.tarjetas {
display: grid;
gap: 1rem;
}
@media (min-width: 700px) {
.tarjetas {
grid-template-columns: repeat(2, 1fr);
}
}
Si a 700px las tarjetas empiezan a tener espacio suficiente para ir en dos columnas, perfecto. Si vuestro contenido necesita 760px, pues será 760px.
Pensad en breakpoints como “momentos en los que el diseño se rompe o mejora”, no como “familias de dispositivos”
Ocultar elementos molestos
Una de las utilidades más potentes de las Media Queries no es reordenar, sino directamente hacer desaparecer elementos que no aportan valor en pantallas pequeñas.
Si tenéis una barra lateral gigante con publicidad y enlaces secundarios, en un móvil va a empujar el contenido principal hacia abajo y el usuario tendrá que hacer scroll infinito. La solución es ser drásticos.
/* En el móvil, la barra lateral simplemente no existe */
.barra-lateral {
display: none;
}
/* Solo la mostramos cuando haya espacio de sobra */
@media (min-width: 1024px) {
.barra-lateral {
display: block;
}
}
No tengáis miedo de usar display: none en dispositivos móviles. Simplificar la interfaz suele mejorar mucho la experiencia de usuario. Si no cabe, y no es el contenido principal, fuera.
Media Queries por orientación
Además del ancho, podemos preguntar por otras características. Por ejemplo, si la pantalla está en vertical u horizontal.
@media (orientation: landscape) {
.galeria {
grid-template-columns: repeat(3, 1fr);
}
}
No se usa tanto como min-width, pero puede venir bien en interfaces muy visuales, juegos, dashboards o elementos que cambian mucho al girar el móvil.
No abuséis de condiciones muy específicas. Cuantas más reglas especiales añadáis, más combinaciones tendréis que mantener. Empezad por ancho de pantalla y añadid otras condiciones solo cuando de verdad aporten.
