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.

¿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).

¿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? Si bien cuando suelo explicar esto a mis alumnos parece ser “pan comido”, la realidad indica que en estructuras más complejas puede ser más laborioso llegar al modelo ideal, sin embargo, Media Queries nos abre las puertas para un mundo fascinante que nos permitirá resolver una multitud de situaciones de diseño. De la mano de esta característica, aparece también una nueva tendencia denominada Responsive Web Design o el Diseño Web Adaptado al Dispositivo.

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

¿Te interesa aprender más sobre como integrar HTML5 y CSS3 en tus sitios Web? Puedes escribirnos.