Este modelo de diseño adapatativo es creación de Luke Wroblewski, este modelo no es tan popular como los que hemos mostrado en anteriores ocasiones pero es un diseño diferente y muy fresco. La idea principal de este modelo es tener una pagina divida en dos columnas, en donde la segunda columna se divide en dos filas, quedando como vemos en la parte izquierda de la imagen superior y que al reducirse la pantalla esta se acomode en una sola colma, tal y como vemos en la parte derecha de la imagen.
Como primer punto, veremos que nuestra pagina clásica no ha cambiado mucho, siguen siendo 3 capas, que están encerradas dentro de una que servirá de referencia, y lo único que agregamos fue la etiqueta HR para separar el texto de los títulos.
Como en los otras ocasiones, vamos al CSS, que es el que se encarga del trabajo en si.
Como podemos observar, el media query se ejecutara cuando la pantalla mida 640 pixeles como mínimo, en ese momento, la primer capa(principal) ocupara el 30% de la pantalla (width : 30%) y las otras dos capas (.segunda .tercera) ocuparan el 70% ( witdh: 70%).
Al ser las dos ultimas capas del mismo ancho se acomodaron una encima de la otra, quedando tal y como vemos a continuación
Pero al hacerse mas pequeña la pantalla, queda de la siguiente forma
A continuación el enlace para descargar el modelo que hemos presentado
Sistemasumma.com 