Una introducción al Responsive Web Design y los Media Queries

El diseño web se está adaptando a las nuevas tendencias de consumo web en diferentes dispositivos. Esto supone tener que mostrar una página en distintas pantallas, ajustándolas por tanto a sus dimensiones. Para dar solución a este problema se está desarrollando el Responsive Web design, o diseño web adaptativo, que tiene como uno de sus principales pilares a los Media Queries.

La base de esta nueva técnica es la flexibilidad. Se trata de acotar las páginas a las características de cada dispositivo haciéndolas fluidas, es decir, que estas se amoldarán según las dimensiones de la pantalla donde se estén mostrando, y para ello todos sus elementos variarán sus características (tamaño, posición, resolución…) para que la usabilidad sea óptima en cada caso.

Para llevar esto a la práctica, se requieren los mencionados Media Queries,  que en resumen no son más que una serie de expresiones que comprueban el estado de los elementos del propio dispositivo y al que se les puede adjuntar una serie de condiciones. De este modo, a través de los Media queries se pueden asignar instrucciones para que la página cambie según la forma que adopte el dispositivo.

Para ello, nos valemos de los comandos @media screen and para indicar en la hoja de estilos cómo se debe mostrar la página. En este comando, con “screen” se hace referencia al tipo de medio donde se quiere dar la instrucción (en este caso “screen” agrupa todos los medios que se ven por pantalla). Luego debemos añadir entre paréntesis las dimensiones donde queremos aplicarla, y por último entre corchetes las condiciones de CSS que queremos poner. Veamos un ejemplo:

@media screen and (max-width: 320px) {
header h1 a{
width:300px;
height:180px;
}
}

De esta forma se pregunta si la pantalla tiene unas dimensiones igual o menores a 320 px, y si esto se cumple, las reglas para el header entre corchetes se aplicarán.

Gracias a esto se pueden reestructurar todos los elementos de la página y diseñarlas según se muestren en un Ipad, un móvil o un ordenador de sobremesa sin tener que rehacer nada. Un gran avance que, junto a otras muchas funcionalidades de los Media Queries y el CSS3,  está suponiendo una verdadera transformación en el diseño web y en el mundo de las aplicaciones móviles.