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.
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
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;
}
}
Ejemplos
Si quieres ver algunos ejemplo en funcionamiento solo tienes que visitar este enlace:
http://designmodo.com/responsive-design-examples/
