Media queries: breakpoints con sistema y prefers-*

Las media queries son los "si..." del CSS: si la pantalla mide al menos 768px, si el usuario prefiere menos movimiento, si la orientación es horizontal. Hoy las dominas con SISTEMA — breakpoints elegidos con razón y las queries de preferencias que separan lo profesional de lo correcto.

La sintaxis, en sus dos versiones

/* La clásica (léela en todo el código existente) */
@media (min-width: 768px) {
.galeria { grid-template-columns: repeat(2, 1fr); }
}

/* La moderna de rangos (escríbela tú: más clara) */
@media (width >= 768px) {
.galeria { grid-template-columns: repeat(2, 1fr); }
}

/* Rangos exactos sin el clásico bug del solapamiento */
@media (768px <= width < 1024px) { /* SOLO tablet */ }

En mobile-first, tus queries son SIEMPRE de mínimos (>=): la base cubre lo pequeño y cada query agrega al crecer. Si te descubres escribiendo max-width a cada rato, estás restando — señal de que la base quedó pensada en desktop.

El sistema de breakpoints

<div class="galeria">
<div class="c">1</div><div class="c">2</div><div class="c">3</div>
<div class="c">4</div><div class="c">5</div><div class="c">6</div>
</div>
<p class="nota">Redimensiona la vista previa: 1 columna → 2 (≥480px del iframe) → 3 (≥720px)</p>

body { font-family: system-ui; padding: 16px; }
.galeria { display: grid; grid-template-columns: 1fr; gap: 10px; }
.c { background: #6d28d9; color: white; border-radius: 8px; padding: 18px; font-weight: 700; text-align: center; }
.nota { font-size: 12px; color: #64748b; }
@media (width >= 480px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 720px) { .galeria { grid-template-columns: repeat(3, 1fr); } }

Orientación y preferencias del usuario

/* Orientación: útil para juegos, videos, galerías a pantalla completa */
@media (orientation: landscape) { ... }

/* EL RESPETO INNEGOCIABLE: usuarios que piden menos movimiento
 (mareos, trastornos vestibulares). Todo lo animado lo obedece. */
@media (prefers-reduced-motion: reduce) {
.animado { animation: none; transition: none; }
}

/* Tema del sistema operativo */
@media (prefers-color-scheme: dark) {
:root { --fondo: #0f172a; --texto: #f1f5f9; }
}

/* Y existe también: prefers-contrast: more */

Las prefers-* son media queries que no miden la PANTALLA sino a la PERSONA. prefers-reduced-motion ya lo venías escribiendo desde el módulo 4 — ahora sabes de qué familia viene y por qué CodeForge lo trata como regla de oro.

Mini-reto

Aplica el sistema a tu periódico: base móvil de 1 columna, >= 768px el aside aparece al lado del main (recuerda grid-template-areas — redibujar el plano), >= 1024px las noticias secundarias a 3 columnas. Tres queries, cero max-width.

Qué sigue

Las media queries miran la VENTANA. La próxima lección presenta el salto generacional: container queries — componentes que responden al espacio de SU CONTENEDOR, estén donde estén.