Tutorial básico para Responsive Design

Con unos pasos sencillos podemos tener un diseño web adaptador a los nuevos dispositivos, Responsive Design. En un primer paso añadiremos una etiqueta meta en la cabecera del documento. Después añadimos compatibilidad con los navegadores antiguos y finalmente las modificaciones necesarios a la hoja de estilos, CSS.

Resumen del Contenido

1. Añadir el meta tag para la escala

Dentro de la etiqueta [highlight]<head>[/highlight] añadimos esta etiqueta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Añadir compatibilidad con navegadores antiguos

Las versiones antiguas de Internet Explorer no soportan el meta “viewport”, debemos añadir un javascript que realice su función.

<!--&#91;if lt IE 9&#93;>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!&#91;endif&#93;-->

3. Aplicar modificaciones al CSS

Escribimos el código CSS necesario que deseamos modificar el función de la resolución. Voy a utilizar como ejemplo el CSS que yo he utilizado para desplazar la barra lateral a debajo del contenido cuando la resolución del dispositivo está entre 700px y 1000px (es decir, para que funcione en un iPad).

@media screen and (min-width: 700px) and (max-width: 1000px) {
/*Todo lo que añadamos aquí se utilizará solo en resoluciones X, donde 700px<=X<=1000px*/
}

Ya con el nuevo código CSS para desplazar la barra lateral para que no permita elementos flotantes a los lados y ajustar toda la maquetación a 700px tendríamos algo como lo siguiente:

@media screen and (min-width: 700px) and (max-width: 1000px) {
 #container{
 width: 700px;
 }

#sidebar-content{
 clear: both;
 width: 100%;
 float:none;
 }
}