Warning Media Queries de CSS — Sintaxis, Ejemplos y Breakpoints
Cómo funcionan las @media queries de CSS, breakpoints y features comunes como min-width y prefers-color-scheme, y por qué una mal formada falla en silencio.
Una media query es una condición CSS — escrita como @media (condición) { ...reglas... } — que solo aplica sus reglas cuando la condición es verdadera: el viewport tiene al menos cierto ancho, el dispositivo está en orientación horizontal, el usuario prefiere modo oscuro, etcétera. Es el mecanismo central detrás del diseño responsivo.
Media features comunes
| Feature | Coincide cuando... |
|---|---|
min-width / max-width | El viewport tiene al menos / a lo sumo un ancho dado — la base de la mayoría de los breakpoints responsivos. |
orientation | El viewport está en modo portrait o landscape. |
prefers-color-scheme | El usuario solicitó modo dark o light a nivel del sistema operativo. |
prefers-reduced-motion | El usuario le pidió al sistema minimizar la animación, mediante reduce. |
hover | El dispositivo de entrada principal puede hacer hover sobre elementos — hover: hover generalmente es verdadero en escritorio, falso en pantallas táctiles. |
print | Usado como tipo de medio en vez de feature — @media print apunta a la salida impresa. |
Combinar condiciones
/* AND — ambas deben ser verdaderas */
@media (min-width: 768px) and (orientation: landscape) { ... }
/* OR — una coma separa alternativas, cualquiera puede ser verdadera */
@media (min-width: 1200px), print { ... }
/* NOT — niega toda la query */
@media not screen { ... }Breakpoints responsivos comunes
/* Mobile-first: los estilos base aplican a todos los tamaños, luego se anulan hacia arriba */
.container { padding: 1rem; }
@media (min-width: 640px) { .container { padding: 1.5rem; } } /* tablets pequeñas */
@media (min-width: 1024px) { .container { padding: 2rem; } } /* escritorio */No hay un conjunto estándar universal de breakpoints — estos son puntos de partida comunes y redondos, no requisitos estrictos. Elige breakpoints según dónde el propio contenido realmente empieza a verse apretado o demasiado disperso, no según una tabla fija de anchos de dispositivo.
@media queries mal formadas — qué revisa el validador
El validador marca una regla @media cuya condición (la parte entre @media y la llave de apertura {) está vacía o tiene paréntesis desbalanceados.
/* Incorrecto: falta el paréntesis de cierre */
@media (min-width: 768px { .sidebar { display: block; } }
/* Incorrecto: sin ninguna condición */
@media { .sidebar { display: block; } }
/* Correcto */
@media (min-width: 768px) { .sidebar { display: block; } }Los parsers de CSS no aplican parcialmente una at-rule mal formada — un bloque @media con una condición que falla al analizarse se descarta por completo, incluyendo cada regla anidada dentro. Eso es un fallo mucho más silencioso que un error de tipeo normal en otra parte de una hoja de estilos: no hay ninguna propiedad inválida ni selector incorrecto que detectar, solo un fragmento de CSS por lo demás correcto que nunca surte efecto, porque la condición que lo envuelve no se analiza. Un paréntesis faltante al editar una media query a mano es la causa más común.
Frequently asked questions
¿Cuál es la diferencia entre min-width y max-width en una media query?
min-width coincide cuando el viewport tiene al menos ese ancho — la base estándar del diseño "mobile-first", donde los estilos base apuntan a pantallas pequeñas y las queries min-width agregan complejidad según el espacio disponible. max-width coincide cuando el viewport tiene a lo sumo ese ancho — usado en diseño "desktop-first", donde los estilos base apuntan a pantallas grandes y las queries max-width reducen las cosas.
¿@media sin condición alguna vez tiene sentido?
No — @media siempre necesita al menos una media feature o tipo. Si se quiere que una regla aplique sin condiciones, simplemente no se envuelve en @media.
¿Esta revisión valida que las media features (como min-width) estén bien escritas?
No — solo revisa que los paréntesis de la condición estén balanceados y que haya una condición presente. Un nombre de feature mal escrito (min-widht) igual pasaría esta revisión específica, aunque de forma similar no coincidiría con nada y no haría nada en silencio.