Tutorial básico para Responsive Design

1 agosto, 2012

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.

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*/ } [/css] 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: [css] @media screen and (min-width: 700px) and (max-width: 1000px) { #container{ width: 700px; } #sidebar-content{ clear: both; width: 100%; float:none; } } [/css]