CSS3: Media Queries, tu sitio web dinamico

Después de mucho tiempo lejos de mi estimado blog, estoy de regreso con algunas propuestas nuevas, poco a poco estaré haciendo algunos cambios. Claro que después de haberlas probado extensamente en mi blog de pruebas. Pero por ahora aquí les dejo algunas opciones que se pueden utilizar en cuanto a la maquetación en nuestro sitio web, en esta ocasión hablaremos de la regla @media, que podemos utilizar para que nuestro sitio web se muestre de manera diferente adaptándose al tamaño de la pantalla de nuestros lectores o visitantes.

Puedes ver un claro ejemplo de esto al hacer mas pequeña la ventana del navegador y automáticamente SantyWeb se adapta al tamaño de la ventana, no importando si el lector tiene una tablet o una computadora completa también es independientemente del dispositivo.

Perfecto, comencemos a comprender como es que esto se puede aplicar a nuestros blogs!..

Sintaxis

Consiste en agregar en nuestro código CSS al final del código, estas lineas y lo que queramos declarar dentro de ellas, son las siguientes:

En donde:

[Resolución Minima]: La resolución mínima de la pantalla a la cual se modificará el CSS de nuestro sitio

[Resolución Máxima]: La resolución máxima de la pantalla de nuestros lectores

Ejemplos

Perfecto, ahora veamos algunos ejemplos que podemos aplicar directamente en nuestros sitios:
Es cuestión de jugar un poco con estas bondades del CSS3 y hacer experimentos, podremos hacer que nuestro sitio sea todo terreno sin necesitar grandes y pesadas librerías de Javascript, PHP o cualquier otro lenguaje. Y esto solo es una probadita de todo lo que puedes hacer con esta técnica y puesto que ofrece mucho mas que adaptarse solo al ancho de la pantalla, posteriormente estaré ampliando la entrada con mas aplicaciones directas al diseño y maquetación de nuestro sitio, por ahora solo queda divertirse y experimentar con esta técnica.