1. ¿Qué son las Media Queries?

Una media query es una regla CSS que se evalúa según las características del dispositivo (anchura, altura, orientación, resolución, etc.). Cuando la condición se cumple, se aplican los estilos declarados dentro del bloque @media.

/* Sintaxis básica */
@media (condición) {
    /* reglas CSS */
}

Las media queries son la base del design responsive y permiten implementar la estrategia mobile‑first o desktop‑first según el proyecto.

2. Principios clave para un diseño responsivo

• Mobile‑first: escribe primero los estilos para pantallas pequeñas y luego amplía con breakpoints.
• Fluido: utiliza unidades relativas (rem, em, %, vw/vh) en lugar de valores fijos.
• Flexbox y Grid: facilitan la reordenación y el dimensionado sin necesidad de media queries excesivas.
• Imágenes adaptativas: srcset, picture y object-fit para servir recursos optimizados.

3. Breakpoints recomendados y comparativa de dispositivos

Nota: los valores pueden variar dependiendo del device‑pixel‑ratio y del zoom del navegador.

4. Ejemplos prácticos de Media Queries

4.1. Cambiar la disposición de columnas

/* Mobile‑first */
.container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .container {
    flex-direction: row; /* De columnas a filas en tablets */
  }
}

4.2. Ajustar tipografía y espacios

html { font-size: 14px; }
@media (min-width: 576px) { html { font-size: 15px; } }
@media (min-width: 992px) { html { font-size: 16px; } }
@media (min-width: 1200px) { html { font-size: 18px; } }

4.3. Mostrar/ocultar elementos

.sidebar { display: none; }
@media (min-width: 992px) {
  .sidebar { display: block; }
}

4.4. Uso de orientation y resolution

/* Landscape tablets */
@media (orientation: landscape) and (min-width: 768px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}
/* Pantallas retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo { background-image: url('logo@2x.png'); }
}

5. Media Queries avanzadas

• Preferencias del usuario: @media (prefers-color-scheme: dark) para temas oscuros.
• Reducción de movimiento: @media (prefers-reduced-motion: reduce) para animaciones suaves.
• Accesibilidad: @media (forced-colors: active) en dispositivos con modos de alto contraste.

/* Tema oscuro automático */
@media (prefers-color-scheme: dark) {
  body { background:#111; color:#eee; }
}

6. Buenas prácticas y rendimiento

1. Orden lógico: coloca siempre primero las reglas base (mobile‑first) y después los @media de mayor ancho.
2. Minimiza la cantidad de breakpoints: usa los valores de Bootstrap como referencia y evita crear muchos puntos intermedios que aumenten el CSS.
3. Combina con clamp(): permite que los tamaños crezcan fluidamente sin depender de breakpoints.
4. Evita usar !important dentro de media queries. Mantén la especificidad bajo control.
5. Compresión y entrega: utiliza herramientas como cssnano o postcss-preset-env para generar un CSS final minificado y con prefijos automáticos.

/* Ejemplo con clamp para tipografía fluida */
h1 {
  font-size: clamp(1.5rem, 2.5vw, 3rem);
}

7. Solución de problemas frecuente

Los estilos no se aplican en móviles

Verifica que la meta etiqueta <meta name="viewport" content="width=device-width, initial-scale=1"> esté presente.

Se superponen breakpoints

Asegúrate de usar min-width en lugar de max-width en una estrategia mobile‑first, o combina ambas con orden correcto.

Los cambios no se reflejan en el navegador

Limpia la caché del navegador o usa Cache‑Bust añadiendo un query string (style.css?v=20251114).

8. Compatibilidad y soporte

Las media queries están soportadas en todos los navegadores modernos (Chrome, Edge, Firefox, Safari) desde versiones anteriores a 2012. Para navegadores muy antiguos (IE8‑), se pueden usar polyfills como matchMedia.js.

9. SEO y accesibilidad

• Los motores de búsqueda indexan el contenido sin importar la resolución; sin embargo, una buena arquitectura de encabezados h1‑h6 y texto legible en todos los tamaños mejora la experiencia de usuario y, por ende, el SEO.
• Usa aria‑hidden o display:none en elementos que aparecen solo en ciertos breakpoints si su presencia afecta la navegación con lectores de pantalla.