Maquetación Web Dinámica / Responsive Design profesional
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
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
| Breakpoint | Nombre mental | Qué suele cambiar |
|---|---|---|
| base (~375px) | móvil | 1 columna, nav compacta — SIN query |
>= 768px | tablet | 2 columnas, sidebar aparece |
>= 1024px | laptop | 3 columnas, nav completa |
>= 1440px | desktop amplio | contenedor con max-width, más aire |
<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
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.
En mobile-first, ¿cuál es la señal de que tus media queries van en la dirección equivocada?
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.