Media Querys CSS3

Introducción a Media Queries con CSS3
¿Qué son los Media Queries?
La rápida distribución de dispositivos móviles, ha puesto el mundo del web de cabeza. Los usuarios ya no ven únicamente contenido web en computadoras de escritorio, sino en smartphones, tabletas y otros dispositivos con un amplio rango de dimensiones. El reto para los diseñadores web es asegurar que sus sitios puedan verse bien,no sólo en una pantalla grande, sino también en una pequeña pantalla de celular y cualquier pantalla de por medio.
Los Media Queries, son una excelente forma de entregar diferentes estilos para diferentes dispositivos, y proveer la mejor experiencia para cada tipo de usuario. Como parte de la especificación CSS3, los Media Queries expanden el rol del atributo media, que controla como se aplicanlos estilos. Por ejemplo: se ha vuelto una práctica común por años el uso de una hoja de estilos por separado para imprimir sitios web al especificar media = “print”. Los Media Queries, llevan esta idea al siguiente nivel, al permitir a los diseñadores asignar estilos basados en las propiedades de un dispositivo, como el ancho de pantalla, orientación y así sucesivamente.
Las Figuras 1- 3,muestran los Media Queries en acción. De hecho muestran el mismo sitio web, visto en una computadora de escritorio, en una tableta y en un iPod Touch.

Figura 1. Al ser vista en una computadora de escritorio, el sitio tiene un layout de dos columnas.

En la versión de escritorio, la página tiene un ancho fijo y un layout de dos columnas, pero cuando el mismo sitio es visto en una tableta, la barralateral se desplaza debajo del contenido principal.


Figura 2. El layout cambia a una sola columna para ajustarse a una pantalla más angosta de una tableta.
Al ser visto el sitio en un iPod Touch, el menú se re-acomoda y las imágenes reducen su escala. Los diferentes estilos se aplican dependiendo el dispositivo con el uso de Media Queries.

Figura 3. Los Media Queries definen nuevos estilosal sitio para ajustarse a una pantalla mucho más pequeña.
Este artículo da una visión general de los Media Queries, incluyendo ejemplos que pueden ser de utilidad para el desarrollo de un sitio web.
Nota: Asegurate de ver los videos en Adobe TV: CSS3 Media Queries con Dreamweaver y Como los Media Queries pueden facilitar el diseño para dispositivos móviles y diferentes tipos de pantallas.Ejemplos de Media Queries
Un ejemplo simple de un Medya Query puede verse así:

En este ejemplo, el Media Query, ha sido agregado a la etiqueta. Como podrás ver más adelante, puedes usar Media Queries con hojas de estilo. El atributo media es dónde reside el Query. Este otro dice:
only screen and (max-width: 400px)
El significado puede ser obvio: aplica esta hoja de estilo sólo a un dispositivocon una ventana de navegador no mayor a 400 pixeles. Puedes observar por el nombre del archivo phone.css que este Query en particular, esta hecho para estilos de un dispositivo móvil. Ahora que has visto un ejemplo, vamos a profundizar en los Media Queries y las características de un dispositivo que se pueden utilizar para controlar como se aplican los estilos.
Soporte y características de MediaQueries
Los Media Queries tienen soporto en Internet Explorer 9+, Firefox 3.5+, Safari 3+, Opera 7+, así como en los smartphones más modernos y otros dispositivos móviles. Aunque versiones viejas de IE no soporten los Media Queries, puedes -y deberías- empezar a usarlos ahora. Más adelante se discute como lidiar con versiones viejas de navegadores.
Tabla 1 lista de características de dispositivosque se pueden usar con Media Queries.
Feature
Value
Min/Max
Description
width
Length
Yes
Width of display area
height
Length
Yes
Height of display area
device-width
Length
Yes
Width of device
device-height
Length
Yes
Height of device
orientation
portrait orlandscape
No
Orientation of device
aspect-ratio
Ratio (w/h)
Yes
Ratio of width to height, expressed as two...