ESTRUCTURA

Estructura

El responsive web design o diseño web adaptable o adaptativo en español, es una técnica de diseño web en la que se utiliza una estructura fluida. Esto hace posible que el contenido de la página se adapte en función de la resolución de la pantalla del visitante, permitiéndole navegar de una forma más cómoda por la web independientemente de si se accede desde un ordenador, un tablet o un móvil, sin tener que hacer zoom continuamente.

Para aplicar el responsive web design en una web se utilizan las siguientes técnicas:

• Una estructura fluida cuyas medidas se expresan en unidades relativas (%) en vez de en unidades absolutas (px o pt), esto permite al contenido adaptarse automáticamente.
• Dimensiones de las imágenes expresadas en unidades relativas (%) para que no rompan el diseño de la página y se redimensionen correctamente.
• Declaración de la meta viewport <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>, para que los móviles y tablets escalen la web correctamente a la pantalla del dispositivo.
• CSS media queries, permiten a los diseñadores establecer unas propiedades (color, ancho, si es o no visible, etc) u otras sobre un determinado elemento (imagen, texto, menú, etc) de la página dependiendo de la resolución de la pantalla del usuario.
• No es estrictamente necesario, pero en determinados diseños es necesario utilizar JavaScript para cambiar el comportamiento de los elementos de la página,  para ello se utiliza el evento window.onresize que permite ejecutar código cuando la ventana del navegador cambia de tamaño.