Responsive Design o Diseño Web Adaptable

26 junio, 2013 Diseño y Desarrollo web No hay comentarios
0 Shares Twitter 0 Facebook 0 LinkedIn 0 Google+ 0 Pin It Share 0 StumbleUpon 0 0 Shares ×

El diseño web adaptable, en inglés Responsive Design, es un sistema basado en los estándares web actuales que permite que las webs se adapten a cualquier pantalla que el usuario pueda tener.

La tendencia es que cada vez más el usuario navega por el móvil. Se ha creado una necesidad de que la web se pueda adaptar al dispositivo, para que no tenga que hacer zoom para leer el contenido de la página y eliminar las cosas que sean innecesarias, ya que la velocidad de internet de un móvil es menor y solo tendremos que cargar lo justo y necesario.

Para ello, está el uso de los media queries en CSS3, con lo que podremos cargar un CSS u otro en función de la anchura de la pantalla que hayamos definido.

No hay que olvidar que tendremos que utilizar la meta-etiqueta “viewport” para visualizar bien nuestra web en el dispositivo móvil, y para ello tendremos que incorporar el meta en el header, y que señalaríamos en el initial-scale su valor 1.0, para que si hemos definido una anchura a nuestra web diferente a la del móvil, este meta escalaría la página para que encajara a la anchura del móvil.

Esta sería la forma de escribir la meta-etiqueta.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

Los 3 diseños más diferenciados para utilizar los “media queries”, son para monitores de ordenador, para tablets o monitores antiguos y para dispositivos móviles. Aunque el “media queries” para tablets es cada vez menos habitual, ya que la resolución de estos dispositivos está aumentando y se puede ver perfectamente una web con diseño para monitor de ordenador.

La forma de escribir un media queries en nuestro CSS sería de la siguiente forma.

@media only screen and (max-width: 400px){

/* Aquí escribiremos nuestro CSS */

}

Existen diferentes valores para los “media queries”. Se puede escribir max-width y min-width a la vez para marcar un máximo y un mínimo de esta forma.

@media only screen and (max-width: 1023px) and (min-width: 340px){

/* Aquí escribiremos nuestro CSS */

}

0 Shares Twitter 0 Facebook 0 LinkedIn 0 Google+ 0 Pin It Share 0 StumbleUpon 0 0 Shares ×
Agencia Diseño Web 360 Okisam - Marketing online Valencia

Deja un comentario

El email es obligatorio pero no será visible para el público.

¿podemos ayudarte en algo?

Contacta con nosotros

¿Crees que podemos ayudarte con tu próximo proyecto?





Valencia

Madrid