1. Repaso rápido de los fundamentos

Una @media query clásica se escribe así:

@media (max-width: 768px) {
  /* estilos para pantallas ≤ 768 px */
}

Este enfoque sigue siendo útil, pero a medida que los dispositivos y las preferencias de los usuarios se diversifican, necesitamos un toolbox más rico.

2. Operadores lógicos y combinaciones avanzadas

Los operadores and, or (implícito mediante comas) y not permiten crear condiciones precisas.

/* Pantalla entre 600 px y 1024 px y modo oscuro */
@media (min-width: 600px) and (max-width: 1024px) and (prefers-color-scheme: dark) {
  body { background:#111; color:#eee; }
}
/* Alternativa para navegadores que no soportan la consulta anterior */
@media (max-width: 1024px), (orientation: portrait) {
  /* reglas para cualquiera de los dos casos */
}
/* Exclusión explícita */
@media not print {
  /* estilos que solo se aplican en pantalla */
}

3. Rango de valores y unidades dinámicas

Los rangos combinan min- y max- para evitar solapamientos y facilitar la gestión de “breakpoints”.

/* Breakpoint fluido entre 40rem y 80rem */
@media (min-width: 40rem) and (max-width: 80rem) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
/* Uso de unidades relativas a la ventana de visualización */
@media (max-height: 30vh) {
  .hero { height: 60vh; }
}

4. Preferencias del usuario y accesibilidad

Los media features de nivel de usuario permiten adaptar la UI a necesidades específicas.

• prefers-color-scheme: detecta modo claro/oscuro.
• prefers-reduced-motion: respeta la preferencia de reducir animaciones.
• prefers-contrast: alta o baja contraste.

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#121212; --text:#e0e0e0; }
}

5. Media queries basadas en resolución y densidad de píxeles

Ideal para servir imágenes optimizadas o activar efectos de alta fidelidad.

@media (min-resolution: 2dppx), (min-device-pixel-ratio: 2) {
  .logo { background-image:url('logo@2x.png'); }
}
@media (orientation: landscape) {
  .gallery { flex-direction: row; }
}

6. CQ: el próximo paso después de las media queries

Los @container permiten que los componentes respondan al tamaño de su contenedor en lugar de la ventana completa, facilitando componentes reutilizables.

/* Definir un contenedor de referencia */
.container-card { container-type: inline-size; }
/* Consulta basada en el contenedor */
@container (min-width: 300px) {
  .card-title { font-size: 1.5rem; }
}

Los navegadores modernos (Chrome 105+, Safari 16+, Edge 105+) ya soportan esta característica.

7. Comparativa rápida: Media Queries vs Container Queries vs JavaScript

8. Buenas prácticas y optimización

1. Diseño mobile‑first: comienza con @media (min-width: …) para que los estilos base sirvan a dispositivos pequeños.
2. Variables CSS para breakpoints: centraliza los valores y reutilízalos.

   :root {
     --bp-sm: 480px;
     --bp-md: 768px;
     --bp-lg: 1024px;
   }
   @media (min-width: var(--bp-md)) { … }
   

3. Evita solapamientos: usa rangos min‑ + max‑ y mantén una progresión lógica.
4. Minimiza repintados: agrupa reglas que cambian propiedades “costosas” (transform, opacity) y evita cambiar layout (width, height) innecesariamente.
5. Prueba en dispositivos reales: emuladores son útiles, pero verifica en hardware real y con lectores de pantalla.

9. Depuración y troubleshooting

Herramientas recomendadas:

• Chrome DevTools → Toggle device toolbar y la pestaña Media para forzar prefers‑color‑scheme, prefers‑reduced‑motion, etc.
• Firefox “Responsive Design Mode” con opciones de “Simulate CSS media feature”.
• Utiliza window.matchMedia() en la consola para validar expresiones.

  console.log(window.matchMedia('(min-width: 600px) and (orientation: portrait)').matches);
  

10. Futuro de las consultas responsivas

Más allá de los @container, la especificación está trabajando en:

• Media queries de nivel de componente (@component), que permitirían detectar atributos de componentes personalizados.
• Feature queries para propiedades CSS (@supports combinadas con media features).

Estar al día con los borradores del W3C garantiza que tu código sea resiliente a los cambios.