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.
Sistemasumma.com 