Mezclándo estilos.

Para este ejemplo vamos a crear una página como la que puedes ver en la siguiente imagen. Esta página está diseñada para ordenadores.

pagina de ejemplo

Ahora vamos a adaptarla a pantallas de móviles mediante la directiva @media:

quitamos el pie derecho

Cuando redimensionamos lo único que cambia es el div de pie derecha. Los demás bloques ocupan el ancho disponible, puesto que no hemos introducido indicación alguna.

representación de página

Segundo punto de ruptura.

Hemos introducido un estilo personalizado para smartphones en el cual se eliminara el pie derecho para pantallas de 320px. Ahora vamos a crear otro estilo para tabletas que tienen una pantalla mayor. Este punto va a ser de 770 px. El diseño estará centrado y tendrá un ancho de 650px. Los bloques del área central estarán en 3 líneas y 2 columnas y ocuparán la mitad del ancho disponible de su elemento padre.

página para tabletas cambia el aspecto original

En este segundo punto de ruptura hemos designado el ancho del contenedor a 650px. El ancho de los artículos es del 50% respecto a su elemento padre (main). Además se ha hecho que todos los article sean flotantes para evitar problemas de flotación no deseados. Con la regla 2n+1, se prohibe la flotación cada dos artículos al utilizarlos con clear:both.

media para tabletas

Tercer punto de ruptura.

Ahora que tenemos punto movil, y tabletas, nos queda hacer un punto de ruptura para pantallas de ordenador, es decir una resolución de 1024px.

Cuando aplicamos la regla queda de la siguiente forma:

pantalla de ordenador

Y el estilo lo puedes ver en la siguiente imagen:

estilo para pantalla grande

Así que ahora si redimensionas la página simulándo diferentes pantallas, la página se adaptará a la pantalla de acuerdo lo hemos establecido en las @medias.

redimensionándo la página y adaptándose