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 <head>):
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
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-widthy 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.0para no tener zoom o2.5para 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).
Parámetros CSS básicos para el Resposnive Design
Para lograr que se adapte nuestra web a los anchos de pantalla debemos de poner en práctica ciertas cosas necesarias:
- La primera, y la más importante es dejar de usar píxeles en todos los sitios y usar porcentajes (por ejemplo:
width:60%). - Que establezcamos el ancho de la página con el 100% no significa que queramos que sea este en una pantalla con alta resolución y para limitar el ancho (o alto si se terciara) debemos de usar el parámetro
max-widtho si quisiésemos establecer un alto máximomax-height(y para establecer el mínimo seríamin-widthymin-height, aunque no será demasiado necesario usarlo). - No usar posiciones absolutas ni fijas (menos cuando hagan falta), para crear una barra lateral donde tendremos un menú, por ejemplo, lo mejor es flotarlo con
float:left/right, aunque esto sería lo básico puede que este ejemplo no se ajustase a nuestras necesidades, pero es una técnica muy usada. - Un diseño sensible deja de serlo en el momento que la imagen de fondo (de tenerla) se repita y no debiera de hacerlo, para eso debemos de escoger una imagen mejor o saber adaptarla (siendo una imagen de fondo lo mejor sería usar
@mediaqueries, que explicaré más abajo). - Las imágenes y vídeos hay que hacer que no sobresalgan de la estructura, sino aparecerá un scroll lateral en los dispositivos móviles que reventará totalmente el diseño (en la próxima parte de la guía os contaré como hacer ambas cosas).
@media queries
Ya hace tiempo hablamos en Genbeta Dev sobre las @media queries (de una forma muy completa) por lo que yo voy a hacer un breve resumen con lo más importante sin entrar en detalles.
La regla @media es un elemento que podemos usar dentro del CSS y podemos configurar de una forma u otra para que su contenido sea visible para según que dispositivo (pantallas, móviles, proyectores… aunque nosotros ya que tenemos un diseño que se adapta a todo usaremos all, ahora lo veréis) o también podemos establecer ciertos parámetros del dispositivo que lo visualiza (como alto, ancho, ratio de la pantalla, orientación…).
En este ejemplo le daremos a una etiqueta div un ancho del 100%, un alto automático y un margen izquierdo de 10 píxeles cuando lo visualicemos con cualquier dispositivo pero que su ancho no supere los 600 píxeles (si tiene un ancho superior la pantalla no se ejecutará la regla CSS ):
@media all and (max-width: 600px){ div{ width:100%; height:auto; margin-left:10px; } }
Esta es la forma básica de adaptar detalles específicos según el tamaño de la pantalla, usar el max-width y min-width (puede que las necesidades nos requieran hacer algo más específico, pero con esto nos debería de valer).
Voy a poner un ejemplo que podría ser funcional, que se basa en un menú que hay en una cabecera y consta de cinco links que mandan a las distintas partes de la web y actuará de la siguiente forma los elementos <a>:
- En principio tendrá el siguiente código, que mantendrá a los cinco elementos en línea.
a.menu { display:inline-block; padding:0px 12px; margin:0px 8px; }
- Cuando el ancho de pantalla sea inferior a 1200 píxeles (lo que podría ser el ancho máximo de la página) los elementos del título se juntan para que no sobresalgan de la cabecera.
@media all and (max-width: 1200px) { a.menu { display: inline-block; padding:0px 6px; margin:0px 4px; } }
- Cuando el ancho de ventana sea inferior a 840 píxeles se reestructurarán los elementos y pasaran de estar en línea a estar en cascada uno debajo del otro y tomarán un pequeño margen a su izquierda.
@media all and (max-width: 840px) { a.menu{ margin:0px; padding:0px; padding-left:5%; display:block; float:none; text-align:left; } }
- Y por último a los 520 píxeles imaginamos que para que se adapte a anchos estrechos el resto de la página ha cambiado de estructura, por lo que ahora dispone el menú de todo el ancho y lo añadiremos un margen izquierdo superior.
@media all and (max-width: 520px) { a.menu{ padding-left:20%; } }
En Genbeta Dev | Introducción al Responsive Design
 |  |
via Genbetadev http://www.genbetadev.com/desarrollo-web/responsive-design-estructura-adaptable
Comentaris
Publica un comentari a l'entrada