CSS

Media Queries y diseño responsive

Aplica estilos según el tamaño de pantalla, orientación o preferencias del usuario con @media. Aprende mobile-first y el meta viewport.

¿Cuánto sabes de CSS?

📘 Teoría

¿Qué es una media query?

Condiciones que el navegador evalúa para aplicar (o no) un bloque de CSS.

Una media query es una regla que encierra un bloque de CSS y una condición. Si la condición se cumple (por ejemplo, "el ancho del viewport es al menos 768px"), el navegador aplica ese bloque; si no, lo ignora.

La sintaxis es @media tipo (condición) { ... }. El tipo más usado es screen (pantalla). En navegadores modernos conviene usar la notación de rango (Media Queries Level 4): (width >= 600px) en lugar de la antigua (min-width: 600px); se lee como una comparación matemática. Las condiciones clásicas son min-width, max-width; también orientation (portrait/landscape) y las preferencias del usuario (prefers-color-scheme, prefers-reduced-motion).

Notación moderna (y la antigua)

/* Siempre */
.card { padding: 1rem; }

/* Notación moderna (Level 4): más legible */
@media (width >= 600px) {
  .card { padding: 1.5rem; }
}

/* Equivalente en notación antigua: @media (min-width: 600px) { ... } */

Enfoque mobile-first

Estilos base para móvil; luego amplías con min-width.

Mobile-first significa definir primero los estilos para pantallas pequeñas (sin media query o como base) y después usar @media (min-width: ...) para añadir o sobrescribir estilos cuando hay más espacio. Así evitas duplicar reglas y el código es más fácil de mantener.

Si en cambio escribieras primero para desktop y luego @media (max-width: 768px), estarías sobrescribiendo muchas propiedades en móvil; con min-width solo añades complejidad donde hace falta.

Estilos base: pensados para móvil (una columna, texto legible, botones táctiles).
min-width: 600px (o similar): tablets, más columnas o más espacio.
min-width: 1024px: escritorio, layouts más anchos.

Mobile-first con grid (notación moderna)

/* Base: una columna */
.grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (width >= 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (width >= 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

El meta viewport

Indispensable para que las media queries tengan sentido en móviles.

Sin el meta viewport, muchos móviles simulan un viewport ancho (por ejemplo 980px) y escalan la página para que "quepa". Las media queries se evalúan contra ese viewport simulado, no contra el ancho real del dispositivo.

Con le dices al navegador que use el ancho real del dispositivo y que no escale. Así (min-width: 600px) se cumple cuando la pantalla mide realmente 600px o más.

En el <head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi página</title>

Anatomía y cómo combinar condiciones

Varias condiciones con and, not y rangos modernos.

Para un rango (p. ej. "solo tablet") la notación antigua obliga a combinar con and: (min-width: 600px) and (max-width: 1023px). La mejora en Media Queries Level 4 es la sintaxis de rango (600px = width = 1024px), que se lee como en matemáticas y evita and. Con not inviertes la condición.

Rango: tablet solo (moderno vs antigua)

/* Notación moderna: rango claro */
@media (600px <= width <= 1024px) {
  .sidebar { display: none; }
}

/* Equivalente en notación antigua */
@media (min-width: 600px) and (max-width: 1023px) {
  .sidebar { display: none; }
}