En este post vamos a intentar explicar en qué consiste el Responsive Web Desing ya que de un tiempo hacia acá es uno de los aspectos del Diseño Web que más demanda está teniendo. Todo esto es debido a que en estos momentos una web se puede visualizar en múltiples dispositivos, desde un ordenador personal, a una tableta o desde un Smartphone.

Debido a todo esto nació el Responsive Web Desing que no es más que adaptar el mismo diseño a los distintos dispositivos donde va a visualizarse nuestra Web, y os preguntareis que ¿cómo se hace esto? Pues a continuación os vamos a dar unos conceptos muy básicos de como poder adaptar nuestra web a los distintos dispositivos.

Desde el punto de vista del diseño hay 2 maneras de empezar a hacer un diseño Responsive, haciendo primero el diseño para el dispositivo más pequeño (a esto se le denomina Mobile First) para ir adaptándolo a pantallas más grandes o hacer lo contrario hacer un diseño para pantallas grandes e ir adaptándolo para dispositivos más pequeños.

Para realizar estas adaptaciones necesitamos de las media queries para decirle a nuestro CSS como se tiene que comportar dependiendo del ancho de pantalla que tenga el dispositivo, por ejemplo una media querie puede ser el siguiente código CSS:

<br /> @media all and (max-width: 1280px) {</p> <p>/*Nuestros selectores CSS y sus reglas</p> <p>solo hay que indicar lo que cambia</p> <p>respecto al CSS anterior*/</p> <p>}<br /> 

Las reglas CSS escritas entre las 2 llaves serian interpretadas por el navegador solo cuando el ancho de la pantalla sea inferior a 1280 px, por lo que ya tenemos controlados todos los dispositivos con una resolución de pantalla inferior a 1280 px. Que queremos controlar dispositivos más pequeños, pues solo tenemos que añadir otra media querie por ejemplo si queremos controlar los dispositivos con una resolución menor a 800 px la media querie que tenemos que utilizar seria la siguiente:

<br /> @media all and (max-width: 800px) {</p> <p>/*Nuestros selectores CSS y sus reglas</p> <p>solo hay que indicar lo que cambia</p> <p>respecto al CSS anterior*/</p> <p>}<br />