Media queries y breakpoints por contenido

Media queries: control explícito sobre el layout

@media (min-width: 768px) { … } aplica un bloque de CSS solo cuando el viewport tiene al menos ese ancho. Es la herramienta principal para cambios de layout intencionales — cuando auto-fit/minmax() de Grid no alcanza porque el cambio necesita ser explícito.

Por qué esta lección es de observación: getComputedStyle refleja el estilo activo al ancho actual del iframe, que es variable. No se puede afirmar “a 600px el layout es fila” en el momento del check. El aprendizaje es observar: escribí el código y arrastrá el borde del preview para ver el cambio.

Sintaxis básica

@media (min-width: 768px) {
  /* Este bloque aplica cuando el viewport tiene 768px o más */
  .sidebar {
    display: block;
  }
}

Estructura:

@media — la regla at-rule de CSS.
(min-width: 768px) — la condición. min-width = “el viewport es al menos N de ancho”.
El bloque { … } — los estilos que se activan cuando la condición se cumple.

Dónde va en el CSS:

/* 1. Estilos base (mobile): FUERA de cualquier @media */
.nav {
  flex-direction: column;
}

/* 2. Expansiones (tablet/desktop): DENTRO de @media con min-width */
@media (min-width: 768px) {
  .nav {
    flex-direction: row;
  }
}

El @media no reemplaza el estilo base — lo modifica con la cascada. El último bloque que aplica gana. En mobile-first, el @media (min-width:…) sobrescribe el estilo base cuando el viewport es suficientemente ancho.

Múltiples breakpoints apilados

Se pueden tener tantos @media como se necesiten. Se apilan de menor a mayor en mobile-first:

.contenido { font-size: 1rem; }           /* móvil — base */

@media (min-width: 640px) {
  .contenido { font-size: 1.125rem; }     /* tablet */
}

@media (min-width: 1024px) {
  .contenido { font-size: 1.25rem; }      /* desktop */
}

Probalo en el sandbox: pegá el código con un <div class="contenido">Texto de prueba</div> y arrastrá el borde del preview para ver cómo el tamaño de fuente salta al cruzar cada breakpoint.

Mobile-first vs desktop-first

Enfoque	Herramienta	Problema
Mobile-first (recomendado)	`@media (min-width:…)`	Los estilos base son los más simples (móvil). Se agrega complejidad de forma progresiva.
Desktop-first (desaconsejado)	`@media (max-width:…)`	Los estilos base son complejos (escritorio). Simplificarlos genera overrides que se anulan entre sí.

El CSS base en mobile-first es el mínimo necesario. Cada @media (min-width:…) agrega funcionalidad — no la deshace. Eso es progressive enhancement.

Breakpoints por contenido, no por dispositivo

Regla fundamental: elegí el breakpoint donde el contenido se rompe visualmente, no donde creés que están los iPhones o los iPads.

Por qué no por dispositivos:

Los tamaños de pantalla cambian con cada generación de hardware.
Un “768px = iPad” de hoy puede quedar desactualizado mañana.
Los dispositivos son miles — ningún set de breakpoints los cubre a todos.

El proceso correcto:

Diseñá el layout para pantalla pequeña (es el estilo base).
Expandí el viewport gradualmente — arrastrá el borde del preview.
Cuando el texto se vuelve difícil de leer (líneas demasiado largas), cuando la imagen desborda, cuando el layout se “rompe” → ahí va el breakpoint.
El número exacto (623px, 741px) importa poco — lo importante es que esté donde el contenido lo necesita.

Valores de referencia (no reglas):

Nombre informal	Valor típico	Cuándo usarlo
base (sin @media)	—	Siempre — es el punto de partida
small / tablet	~640px	Cuando 1 columna cabe mejor en 2
medium / desktop	~1024px	Cuando 2 columnas caben mejor en 3+
large	~1280px	Para layouts más elaborados

Estos valores son referencias, no contratos con el hardware.

Probalo en el sandbox

Pegá este código completo en el sandbox (HTML y CSS) y arrastrá el borde del preview:

<nav class="nav">
  <a href="#">Inicio</a>
  <a href="#">Productos</a>
  <a href="#">Contacto</a>
</nav>
<main class="contenido">
  <p>El contenido principal va acá. En móvil ocupa todo el ancho; en desktop comparte espacio con el nav lateral.</p>
</main>

body { margin: 0; font-family: system-ui, sans-serif; }

.nav {
  background: #1e3a5f;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  gap: 0.25rem;
}

.nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem;
}

.contenido {
  padding: 1rem;
}

@media (min-width: 768px) {
  body { display: flex; }
  .nav { flex-direction: column; width: 200px; min-height: 100vh; }
  .contenido { flex: 1; }
}

Al cruzar los 768px, el nav horizontal se convierte en una barra lateral. Ese es el cambio de estructura que solo @media puede hacer — auto-fit no puede cambiar la orientación de la navegación.