Responsive Design: estructura adaptable html

Tras la introducción al Responsive Design ahora toca conocer lo esencial para crearlos: el meta-tag Viewport, las @media queries y tener en cuentas ciertas cosas más «clásicas», pero que son esenciales (cosas como las que permiten que los borradores y notas de W3C se adapten «casi» perfectamente al ancho de pantalla).

Viewport

Esta meta-etiqueta fue creada en principio por Apple para su móvil predilecto, pero se ha convertido en todo un estándar que es soportado por la mayoría de los dispositivos móviles (smartphones, tablets y gran parte de móviles de gama media y baja).

Su uso es totalmente necesario, ya que sino el navegador establece el ancho con el que prefiere visualizar una página en lugar de usar el ancho del que dispone (es decir, si la pantalla de nuestro móvil tiene 400px y el navegador detecta que lo óptimo sería visualizarla con 700px así lo hará si no usamos esta meta-etiqueta).

Este es un ejemplo de como usarla, es el que yo recomiendo, ya que es la configuración más habitual (hay que añadirlo en el ):

Se pueden usar los siguientes parámetros (separados por comas):

• Width: ancho de la página (se puede establecer en píxeles o como device-width y usará el ancho del que dispone).
• Height: alto de la página, actúa igual que el width.
• Initial-scale: escala o zoom inicial de la página (este y los demás tipos de escala se establecen con valores como 1.0 para no tener zoom o 2.5 para tener un zoom del 2,5 de aumento, por ejemplo).
• Minimum-scale: zoom mínimo que podemos hacer en la página.
• Maximum-scale: zoom máximo que podemos hacer en la página.
• User-scalable: establece si está permitido o no hacer zoom (yes/no).

.