¿Cómo habilitan las media queries el diseño responsivo?

Question

Accepted Answer

Las **media queries** aplican CSS condicionalmente según características del dispositivo — generalmente el **ancho del viewport** — permitiendo que una hoja de estilos se adapte a teléfonos, tablets y computadoras.

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## Mobile-first (min-width) vs desktop-first (max-width)

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**Mobile-first** (`min-width`) generalmente es preferido: escribes estilos base simples para pantallas pequeñas, luego añades progresivamente complejidad para pantallas más grandes. Esto tiende a producir CSS más limpio y ligero, y coincide con cómo se redistribuye el contenido.

## Otras queries útiles

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` y `prefers-color-scheme` responden a las *preferencias* del usuario, no al tamaño de pantalla — importante para accesibilidad y temas.

## Combinando condiciones

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## Una nota sobre el futuro: container queries

Las media queries responden al **viewport**; las **container queries** más nuevas (`@container`) responden al *tamaño de un elemento padre* — mejor para componentes verdaderamente reutilizables. Las complementan en lugar de reemplazarlas.

## Por qué es importante

Las media queries son el fundamento del diseño responsivo — adaptar el layout, espaciado y columnas al tamaño de pantalla.

El enfoque `min-width` mobile-first mantiene el CSS manejable, y las queries de preferencia (`prefers-reduced-motion`, `prefers-color-scheme`) extienden la responsividad a accesibilidad y temas.