Responsive Design III: Mostly Fluid


mostly fluid

Mostly Fluid, es uno de los diseños de responsive design más usados, fue creado por Luke Wroblewski’s y es muy simple y elegante, básicamente es una variante del diseño de 3 columnas que vimos en un post anterior.

Como vemos en la imagen de inicio del post la idea es tener un encabezado y dos columnas, que después deberán convertirse en tres franjas (en la versión móvil), así que comencemos por ver que hemos cambiado en nuestro HTML.

 

 

 

 

 

Como podemos ver, tenemos tres capas contenidas dentro de una, lo cual es el mismo diseño del modelo de 3 columnas, pero observemos que ahora las tres capas pertenecen a tres clases distintas ( div class = “”) las cuales se denominan colma, columna1, columna2.

Con esta pagina obtenemos las tres franjas horizontales que corresponden a la versión de la pagina para pantallas pequeñas, por lo que el CSS, lo que hará, es mover las dos capas de abajo para que ocupen la mitad de su espacio y estén una al lado de la otra, con lo que obtendremos la versión de 1 encabezado y 2 columnas para la versión web normal.

Veamos el CSS de este modelo

 

 

 

 

Observemos que en este caso, el media query establece que el cambio de reglas se hara cuando la pantalla alcance un ancho mínimo de 600 pixeles, es decir, las reglas se activaran en resoluciones con un ancho superior a ese, y el cambio es que las capas con las clases columna1 y columna2 cambiaran su ancho a un 50%, con lo que  las dos capas pasan a convertirse en columnas, obteniendo la siguiente apariencia.

 

Ya para terminar les dejo el enlace para que descarguen el ejemplo de Mostly Fluid que hemos realizado.

 

http://db.tt/25KHBBiT

 

 

 

 

Anuncios

Acerca de sistemasumma

Blog dedicado a la tecnología y a todos los estudiantes de sistemas, informatica, computación y afines
Esta entrada fue publicada en Lenguajes de aplicaciones y etiquetada , , , , . Guarda el enlace permanente.

¿Qué estas pensando?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s