Vivimos en un tiempo donde la resolución y tamaño de pantalla «estándar» es imposible de predecir para todos los medios y dispositivos. Desde el clásico 640×480 px hasta el 1024×768 px (pasando por 800×600 px) hemos visto desfilar diferentes «resoluciones estándar de pantallas». Sin embargo, el éxito de los monitores wide, con diferentes proporciones y resoluciones en sus pantalla, sumado a esto la expansión infinita de smartphones y tablets, han conjugado un nuevo panorama en el diseño y desarrollo de sitios web.

Crear un sitio con dimensiones fijas ya no será suficiente en la mayoría de los casos y la capacidad de detectar características de pantalla se ha vuelto una necesidad fundamental para diseñadores y desarrolladores Web. De la mano de CSS3 encontramos un excelente camino para resolver esta necesidad.

La revolución de los Media Queries

Los media queries han sido un componente esencial del diseño web responsive desde su introducción en CSS3. Con un potencial enorme han permitido a diseñadores y desarrolladores web adaptar las interfaces a distintos dispositivos y tamaños de pantalla, garantizando que las páginas web se vean bien y funcionen correctamente en cualquier contexto.

Con la estandarización de Media Queries Level 3 en mayo de 2024, las media queries han dado un salto evolutivo que sigue consolidándolas como una herramienta clave en la maquetación moderna.

¿Qué podemos hacer con Media Queries? Muchas cosas. Entre ellas aplicar reglas de estilos según el ancho o el alto de la pantalla o modificar estilos cuando el dispositivo cambia su orientación (entre vertical y horizontal).

Media Queries en ejemplos prácticos

¿Un ejemplo de uso? Supongamos que tenemos dos divs (cuyas id son div1 y div2, respetivamente) y que los tenemos flotando a la izquierda. El primer div ocupa el 30% y el segundo 70% en el esquema. El CSS sería algo como lo que sigue:

div1{
  width:30%;
  float:left;
}
div2{
  width:70%;
  float:left;
}

Ahora vayamos al caso que al estar en una resolución de un dispositivo móvil, por ejemplo 480px de ancho, deseamos que los divs ocupen, cada uno, el total del ancho y queden uno debajo del otro (en lugar de estar uno al lado del otro). Podremos aplicar una regla de Media Queries como la que sigue:

@media screen and (max-width: 480px) {
	div1{
    	  width:100%;
 	 }
	div2{
    	  width:100%;
  	}
}

¿Sencillo, verdad? Estas estructuras simplificadas sirven para ejemplificar muy bien los Media Queries. Sin embargo, debemos tener presente que en estructuras más complejas puede ser más laborioso llegar al modelo ideal.

Me parece importante señalar que dentro de las reglas de las @media que definimos solo debemos establecer las nuevas propiedades o los valores que necesitan actualización. Si tenemos valores establecidos en los estilos generales que no se modifican, no resulta necesario volver a establecerlos. Por esa razón en el ejemplo no volví a escribir las reglas relacionadas con flotación, ya que no se modifican en las reglas especificadas dentro de @media screen and (max-width: 480px).

Media Queries nos abre las puertas para un mundo fascinante que nos permite resolver una multitud de situaciones de diseño. De la mano de esta característica ha evolucionado el Responsive Web Design o el Diseño Web Adaptado al Dispositivo.

Media Queries Level 3

Es importante destacar que Media Queries es W3C Recommendation desde Junio de 2012. La versión incial cuenta con muy buena compatibilidad en navegadores de escritorio y también en móviles (http://caniuse.com/css-mediaqueries).

En Mayo de 2024 Media Queries Level 3 llegó al estado de recomendación. Incluyendo interesantes novedades para el estándar.

Con la creciente necesidad de accesibilidad, Level 3 introduce la posibilidad de adaptar el diseño en función del contraste preferido por el usuario. Esto permite personalizar la apariencia de una página para aquellos que tienen necesidades especiales de visualización.

A continuación veremos un ejemplo de esto:

@media (prefers-contrast: high) {
    body {
        background-color: black;
        color: white;
    }
}

Las consultas ahora permiten diferenciar entre dispositivos que soportan hover (pasar el cursor) y la precisión del puntero. Esto es especialmente útil para distinguir entre interfaces táctiles y no táctiles. Este detalle es una evolución muy importante desde las primeras versiones del estándar.

También se añade capacidad de detectar el rango dinámico de la pantalla (Dynamic Range). Esto resulta muy importante a la hora de adaptar las imágenes y videos a las capacidades HDR (High Dynamic Range) de dispositivos moderno

Consideraciones finales

No caben dudas que los Media Queries siguen siendo esenciales para garantizar que los interfaces Web sean fluidas y se adapten a las necesidades de los usuarios. Vivimos en un mundo donde la variedad de dispositivos va desde relojes inteligentes hasta grandes pantallas de TV. La capacidad de ajustar las interfaces sin necesidad de crear sitios web separados para cada uno es clave para la eficiencia del diseño.

Con la evolución continua del Responsive Web Design, particularmente con la llegada de Media Queries Level 3, los diseñadores y desarrolladores ahora tenemos más herramientas que nunca para diseñar experiencias web altamente personalizadas, adaptativas y accesibles. Estas mejoras refuerzan el papel crucial de las Media Queries en la maquetación web moderna.

A medida que la tecnología sigue avanzando, los Media Queries seguirán siendo un pilar fundamental en el diseño responsive y en la creación de experiencias centradas en el usuario.

Como consideración final me parece importante señalar que Media Queries Level 4 ya está en marcha como Working Draft.