Tienes un diseño que se ve perfecto en tu portátil y horrible en el móvil. La culpa casi nunca es del HTML: es que falta decirle al CSS cómo comportarse en cada pantalla. Para eso existen las CSS media queries.
En esta guía te enseño la sintaxis desde cero, con ejemplos que puedes copiar y pegar. Verás cómo se escribe una media query, qué breakpoints uso en 2026, cómo detectar el modo oscuro con prefers-color-scheme y por qué los container queries están cambiando la forma de trabajar. Nada de teoría vacía: código real y decisiones que te ahorran tiempo.
Esta es la pieza de referencia sobre la sintaxis. Si lo que buscas es montar un sitio adaptable de principio a fin, al final te enlazo las guías prácticas del blog.
Qué es una media query
Una media query es una regla de CSS que aplica estilos solo cuando se cumple una condición sobre el dispositivo o la ventana. La condición más habitual es el ancho de la pantalla, pero también puedes preguntar por la orientación, el modo oscuro o si el usuario navega con ratón o con el dedo.
La idea es sencilla: escribes un CSS base y luego «parcheas» ese CSS bajo ciertas condiciones. En una pantalla ancha muestras tres columnas; por debajo de cierto ancho, las apilas en una sola. El navegador evalúa la condición en tiempo real y activa o desactiva esos estilos según cambie la ventana.
Las media queries son la base del diseño responsive. Sin ellas, tu web tendría el mismo aspecto en un monitor de 27 pulgadas y en un teléfono de 5. Con ellas, decides qué cambia y a partir de qué punto.
Anatomía de una media query: la sintaxis
Toda media query empieza por la regla @media, seguida de una condición y un bloque de estilos entre llaves. Este es el esqueleto:
@media (max-width: 600px) {
.menu {
display: none;
}
}Léelo en voz alta: «cuando el ancho de la ventana sea como máximo 600 píxeles, oculta el menú». La condición (max-width: 600px) es la clave. Dentro de las llaves va CSS normal y corriente.
Puedes combinar condiciones con and cuando quieres que se cumplan varias a la vez. Por ejemplo, un rango entre 600 y 900 píxeles:
@media (min-width: 600px) and (max-width: 900px) {
.sidebar {
width: 40%;
}
}La coma funciona como un «o» lógico. Si quieres aplicar los mismos estilos en pantallas muy estrechas o en orientación vertical, separas las condiciones con coma:
@media (max-width: 500px), (orientation: portrait) {
.grid {
grid-template-columns: 1fr;
}
}Y con not niegas una condición completa. Con esto ya cubres el 90% de lo que vas a escribir. Todo lo demás es elegir bien la feature a la que preguntas.
Tipos de media y features útiles
Antes de la condición puedes indicar un tipo de media. Los que se siguen usando son screen (pantallas), print (al imprimir) y all (todos). Los tipos antiguos como tv o handheld están obsoletos; olvídate de ellos.
/* Estilos solo al imprimir la página */
@media print {
.anuncios, .menu {
display: none;
}
}Lo interesante de verdad son las media features: las propiedades a las que preguntas. Estas son las que uso a diario:
- width (min-width / max-width): el ancho de la ventana. La feature reina del responsive.
- orientation: portrait (vertical) o landscape (horizontal). Útil en tablets y móviles.
- aspect-ratio: la proporción de la ventana. Por ejemplo, tratar distinto una pantalla panorámica.
- hover: si el dispositivo puede hacer hover. En móvil el hover no existe de forma fiable.
- pointer: fine (ratón o lápiz preciso) o coarse (dedo). Ideal para agrandar zonas táctiles.
Este ejemplo agranda un botón cuando el usuario navega con el dedo, que necesita más área para acertar:
@media (pointer: coarse) {
.boton {
min-height: 48px;
padding: 12px 20px;
}
}Y este solo activa los efectos de hover en dispositivos que realmente lo soportan, para que en móvil no queden estilos «pegados» tras un toque:
@media (hover: hover) {
.tarjeta:hover {
transform: translateY(-4px);
}
}Breakpoints recomendados en 2026 (mobile-first)
Un breakpoint es el ancho concreto en el que tu diseño cambia. Mi consejo es trabajar mobile-first: escribes primero el CSS para móvil y vas añadiendo min-width para pantallas más grandes. Así el CSS base es el más simple y solo sumas complejidad cuando hay espacio.
Estos son los breakpoints que uso como punto de partida. No son dogma: ajústalos a tu contenido, no a marcas concretas de móvil.
| Breakpoint | Ancho | Dispositivo típico |
|---|---|---|
| Base (sin media query) | < 640px | Móvil |
| sm | min-width: 640px | Móvil grande / tablet vertical |
| md | min-width: 768px | Tablet |
| lg | min-width: 1024px | Portátil |
| xl | min-width: 1280px | Escritorio |
Así se ve un layout mobile-first: una columna por defecto, dos a partir de tablet y tres en escritorio.
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}Un consejo que me ha ahorrado muchos disgustos: define los breakpoints con em en lugar de píxeles si quieres que respeten el zoom del navegador. 768px equivale a 48em con la raíz por defecto de 16px.
No pongas breakpoints donde estén los móviles de moda. Ponlos donde tu diseño se rompe. Redimensiona la ventana despacio y verás exactamente dónde hace falta uno.
prefers-color-scheme y prefers-reduced-motion
Las media queries no solo miden pantallas: también leen las preferencias del usuario configuradas en su sistema. Dos son imprescindibles hoy.
La primera es prefers-color-scheme, que detecta si el usuario tiene activado el modo oscuro. Con ella ofreces un tema oscuro automático sin obligar a nada:
:root {
--fondo: #ffffff;
--texto: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
:root {
--fondo: #121212;
--texto: #eaeaea;
}
}Al declarar los colores como variables y solo cambiarlas dentro de la media query, todo tu sitio se adapta con muy pocas líneas. Es la forma más limpia de montar modo oscuro.
La segunda es prefers-reduced-motion. Hay personas a las que las animaciones les provocan mareo. Respetar su preferencia no es opcional, es accesibilidad básica:
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Con ese bloque, quien ha pedido menos movimiento en su sistema ve tu web casi sin animaciones. Cuesta cuatro líneas y mejora la experiencia de mucha gente.
Sintaxis de rangos moderna
Durante años, escribir un rango de anchos obligaba a repetir min-width y max-width unidos con and. La sintaxis moderna, ya soportada por todos los navegadores actuales, permite usar operadores de comparación como en matemáticas.
Compara. Antes escribías esto:
@media (min-width: 600px) and (max-width: 900px) {
.caja { padding: 24px; }
}Y ahora puedes escribir lo mismo, más corto y más legible, con los operadores <= y >=:
@media (600px <= width <= 900px) {
.caja { padding: 24px; }
}Para un solo límite también funciona. (width >= 768px) equivale a (min-width: 768px), y se lee mejor:
@media (width >= 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}Dispones de <, <=, > y >=. La sintaxis antigua con min-/max- sigue siendo válida, así que puedes adoptar la nueva a tu ritmo sin romper nada.
Container queries: la evolución
Las media queries tienen un límite: siempre miden la ventana entera, no el espacio real que ocupa un componente. Si tienes una tarjeta que aparece en la barra lateral y también a todo lo ancho, la media query no sabe distinguir esos dos contextos. Ahí entran los container queries.
Un container query pregunta por el tamaño del contenedor padre, no de la ventana. Primero marcas un elemento como contenedor y luego consultas su ancho con @container:
.lista-tarjetas {
container-type: inline-size;
}
/* La tarjeta se adapta al ancho de su contenedor, no de la pantalla */
@container (min-width: 400px) {
.tarjeta {
display: flex;
gap: 16px;
}
}Esto es un cambio de mentalidad. Con container queries, un componente sabe adaptarse solo, lo pongas donde lo pongas. Ya funciona en todos los navegadores modernos. No sustituyen a las media queries para el layout global de la página, pero para componentes reutilizables son la mejor herramienta que tenemos.
Mi recomendación práctica: usa media queries para la estructura general (cabecera, columnas principales) y container queries para piezas que se repiten en contextos distintos.
Errores comunes que veo siempre
Estos fallos aparecen una y otra vez en proyectos junior. Si los evitas, te ahorras horas de depuración.
- Olvidar la etiqueta viewport. Sin el meta viewport en el HTML, el móvil ignora tus media queries y hace zoom out. Es el error número uno.
- Mezclar min-width y max-width sin criterio. Elige una estrategia (mobile-first con min-width) y sé coherente en todo el proyecto.
- Poner demasiados breakpoints. No necesitas uno por cada móvil. Añade uno solo cuando el diseño se rompa de verdad.
- Usar hover sin comprobar el dispositivo. Un menú que se abre con hover deja fuera a todo el tráfico táctil.
- Duplicar reglas en cada breakpoint. Si repites el mismo valor tres veces, probablemente sobre una media query.
El del viewport es tan frecuente que le dediqué una guía aparte: revisa cómo configurar el viewport para un diseño móvil óptimo antes de pelearte con las media queries.
Más recursos para tu diseño responsive
Esta guía cubre la sintaxis. Cuando quieras llevarla a un sitio completo, te vienen bien estas piezas del blog:
- Cómo hacer una página web responsive: el proceso completo, paso a paso.
- Cómo usar vw, vh y rem para anchos variables: unidades fluidas que reducen la necesidad de breakpoints.
- Mejorar el rendimiento de tu sitio móvil con CSS: que tu web adaptable además cargue rápido.
Si quieres la referencia oficial de cada feature, la documentación de media queries en MDN es la fuente que consulto cuando dudo.
Preguntas frecuentes
¿Qué diferencia hay entre min-width y max-width?
Con min-width los estilos se aplican de ese ancho hacia arriba; es lo que usas en mobile-first. Con max-width se aplican de ese ancho hacia abajo, típico del enfoque desktop-first. Recomiendo min-width por coherencia y por un CSS base más simple.
¿Cuántos breakpoints debería usar?
Los que tu diseño necesite, ni uno más. Muchos proyectos funcionan bien con tres o cuatro. En vez de copiar una lista fija, redimensiona la ventana y añade un breakpoint solo donde el contenido se vea mal.
¿Las media queries funcionan sin la etiqueta viewport?
En móvil, no como esperas. Sin el meta viewport el navegador simula una pantalla ancha y hace zoom out, así que tus media queries de móvil no se disparan. Añade siempre la etiqueta en el head del HTML.
¿Puedo usar ya la sintaxis de rangos con <= y >=?
Sí. Está soportada en todos los navegadores modernos. Si necesitas dar cobertura a navegadores muy antiguos, sigue usando min-width y max-width, que son totalmente equivalentes y no van a desaparecer.
¿Container queries sustituyen a las media queries?
No, se complementan. Usa media queries para el layout global de la página y container queries para componentes que deben adaptarse al espacio de su contenedor. Juntas cubren casi cualquier necesidad de diseño adaptable.
Con esto tienes la sintaxis dominada. Abre tu proyecto, redimensiona la ventana y coloca tu primer breakpoint donde el diseño lo pida. Si te ha servido, compártelo con quien esté empezando con CSS.
