Responsive Design CSS

En una práctica creamos layouts rígidos, hemos hablado de los fluidos y ahora toca hablar de los líquidos.

Los layouts fuidos son los que programábamos con “%” para que se adaptaran al porcentaje de la pantalla. Este es un sistema bastante facil de adaptar y que responde a la mayoria de las necesidades pero que aun tiene ciertas limitaciones. A lo mejor al apartado del menú le deja un espacio demasiado grande en alguna resolución, etc…
 Los layouts fluidos son aquellos que se adaptan a la resolución en
concreto con la que veamos la página.

En la siguiente práctica vamos a practicar algunos apuntes básicos de esta
técnica para que al final creeis un layout fluido.

Utiliza las resoluciones más tipicas en internet.
Smartphones
Pantallas normales
Pantallas panorámicas grandes
Ampliación:
Realiza un layout con header, footer y 3 columnas (izquierda centro y
derecha) en la que al cambiar la resolución variará el diseño de la página (la
columna de la izquierda que tendrà el menú se pondrà en la parte superior).

Páginas interesante:
http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

http://www.creativasfera.com/aprende-ya-diseno-web-responsive-layout-fluido

Aqui podemos ver la web en medidas grandes.

1

Aqui la podemos en ver en medida mediana.

2

Y aqui en formato iphone .

3

Anuncios

Publicado el 21 diciembre, 2013 en Desarrollo de Interfaces Web. Añade a favoritos el enlace permanente. Comentarios desactivados en Responsive Design CSS.

Los comentarios están cerrados.

A %d blogueros les gusta esto: