Las media queries en CSS son una herramienta clave para crear diseños responsivos, es decir, para que una página web se adapte correctamente a diferentes dispositivos y tamaños de pantalla. Esto se logra aplicando reglas CSS específicas solo cuando se cumplen ciertas condiciones, como el ancho de la pantalla, la orientación del dispositivo o incluso el tipo de interacción (por ejemplo, si se usa un ratón o una pantalla táctil).

Una media query se define utilizando la regla @media, seguida de uno o varios criterios, conocidos como "media features". Estos criterios pueden combinarse usando operadores lógicos como and, or y not. Por ejemplo, se puede aplicar un estilo específico solo cuando el ancho de la ventana del navegador es menor o igual a 600 píxeles:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

En este caso, si la ventana del navegador tiene un ancho de 600 píxeles o menos, el fondo de la página cambiará a un tono azul claro. Este tipo de ajuste permite que el diseño sea legible y funcional tanto en dispositivos móviles como en pantallas más grandes.

La sintaxis básica de una media query es la siguiente:

@media [tipo de dispositivo] and (condición) {
  /* Reglas CSS aquí */
}

El tipo de dispositivo puede ser screen, print, o all, aunque en la mayoría de los casos se utiliza screen. Las condiciones más comunes incluyen propiedades como max-width, min-width, orientation, resolution, entre otras. Por ejemplo, para ajustar el diseño según la orientación del dispositivo, se puede usar:

@media (orientation: landscape) {
  body {
    font-size: 18px;
  }
}

Esto asegura que, cuando el dispositivo esté en modo horizontal, el tamaño de la fuente aumente para mejorar la legibilidad.

Una estrategia común en el diseño responsivo es el enfoque "Mobile First". Esto implica diseñar primero para dispositivos móviles y luego agregar estilos adicionales para pantallas más grandes mediante media queries con condiciones de min-width. Por ejemplo:

/* Estilos base para móviles */
body {
  font-size: 16px;
  margin: 10px;
}

/* Estilos para tablets y dispositivos mayores a 768px */
@media only screen and (min-width: 768px) {
  body {
    font-size: 18px;
    margin: 20px;
  }
}

/* Estilos para escritorios y dispositivos mayores a 1200px */
@media only screen and (min-width: 1200px) {
  body {
    font-size: 20px;
    margin: 40px;
  }
}

Este enfoque garantiza que la página se vea bien en dispositivos pequeños y se vaya adaptando progresivamente a pantallas más grandes.

En la práctica, las media queries se utilizan para ajustar diversos aspectos del diseño. Por ejemplo, para adaptar un sistema de columnas a diferentes tamaños de pantalla, se puede hacer lo siguiente:

.column {
  float: left;
  width: 25%;
}

/* Para pantallas de 992px o menos, usar dos columnas */
@media only screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* Para pantallas de 600px o menos, usar una columna */
@media only screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

De esta manera, el diseño se ajusta dinámicamente según el ancho de la pantalla, mostrando cuatro columnas en pantallas grandes, dos en tablets y una sola en móviles.

Otro ejemplo común es la adaptación de menús de navegación. En pantallas grandes, un menú puede mostrarse en horizontal, mientras que en dispositivos móviles puede cambiar a un diseño vertical para mejorar la usabilidad:

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* En pantallas de 600px o menos, los enlaces se muestran en bloque */
@media only screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Además de ajustar el diseño según el ancho de la pantalla, las media queries también permiten considerar otros factores, como la orientación del dispositivo o la densidad de píxeles. Esto es especialmente útil para optimizar imágenes en pantallas de alta resolución, como las pantallas retina.

Aunque las media queries son ampliamente compatibles con los navegadores modernos, es importante tener en cuenta que versiones antiguas, como Internet Explorer 8, pueden tener un soporte limitado. Por ello, es recomendable asegurarse de que el diseño funcione correctamente en todos los navegadores que se deseen soportar.

Es decir, las media queries son una herramienta esencial para el diseño web responsivo. Permiten adaptar la apariencia y estructura de un sitio web a diferentes dispositivos, mejorando la experiencia del usuario y contribuyendo a un mejor posicionamiento en buscadores.

Con un enfoque Mobile First y un uso adecuado de los puntos de quiebre, es posible crear diseños flexibles y modernos que se ajusten a las necesidades de los usuarios en cualquier dispositivo. Para aquellos que buscan simplificar el proceso de creación de diseños responsivos, existen frameworks como Bootstrap, Foundation, Tailwind CSS, Bulma y W3.CSS, que ofrecen sistemas de grillas y utilidades predefinidas para manejar media queries de manera más eficiente. Estas herramientas pueden ahorrar tiempo y garantizar una mayor consistencia en el diseño, aunque también es posible trabajar con media queries de forma manual para proyectos más personalizados.