¿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 aplican los 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 barra lateral 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 estilos al 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:

El significado puede ser obvio: aplica esta hoja de estilo sólo a un dispositivo con 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 Media Queries

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 dispositivos que 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 integers separated by a slash (e.g., 16/9)
device-aspect-ratio	Ratio (w/h)	Yes	Ratio of device-width to device-height
color	Integer	Yes	Number of bits per color component (if not color, the value is 0)
color-index	Integer	Yes	Number of entries in the output device’s color lookup table
monochrome	Integer	Yes	Number of bits per pixel in the monochrome frame buffer (if not monochrome, the value is 0)
resolution	Resolution	Yes	Density of pixels of output device, express as integer followed by dpi(dots per inch) or dpcm (dots per centimeter)
scan	progressiveor interlace	No	Scanning process used by TV devices
grid	0 or 1	No	If set to 1, the device is grid-based, such as a teletype terminal or phone display with only one fixed font (all other devices are 0)

Tabla 1. Características de dispositivos para ajustar condiciones en Media Queries.

Las primeras cinco características de la Tabla 1 (width, height, device-width, device-height y orientation) son las más útiles. Puedes agregar un prefijo a la mayoría de las características con min- y max- para indicar un valor mínimo y máximo, como min-with y max-width. La columna Min/Max en la Tabla 1, indica que características se pueden modificar de esta manera.

Ancho, ancho de dispositivo y ventana.

Quizás uno de los aspectos más confusos de los Media Queries, es la diferencia entre width y height y sus valores equivalentes predefinidos por device-. En el caso de computadoras portables y de escritorio, la diferencia es fácil de entender: width y height se refieren al tamaño de la ventana del navegador, mientras que device-width y device-height se refieren a las dimensiones del monitor. No todo mundo corre su navegador a pantalla completa, así que tienes que utilizar width y height.

Los navegadores de dispositivos móviles, ocupan toda la pantalla, así que podrías esperar que width y device-width sean lo mismo. Desafortunadamente no siempre es el caso. La mayoría de los smartphones, incluyendo Android, iPhone y Windows Phone 7, ajustan width a una vista nominal de aproximadamente 1000 pixeles de ancho (en un iPhone y iPod Touch, de 980 pixeles, Windows Phone 7 usa 1024). La Figura 4 muestra como un iPod Touch despliega normalmente la página de ejemplo en las figuras previas.

Figura 4. Por default, los dispositivos modernos, escalan los sitios web para encajar en una ventana hipotética.

Aunque la hoja de estilos este vinculada con la página utilizando Media Queries, para proporcionar diferentes estilos dependiendo de los valores min-width y max-width, el iPod Touch, ignora los estilos y despliega la versión de escritorio por que su ventana se considera de 980 pixeles de ancho.

Para hacerlo más confuso, el iPhone, iPod Touch y iPad, no toman en cuenta la orientación para calcular el ancho, mientras que otros dispositivos si.

Afortunadamente hay una solución simple para esta confusión. La nueva etiqueta de Apple, que ha sido adoptada ampliamente por otros fabricantes de dispositivos móviles, se ha incorporado a la especificación que muy probablemente apruebe la World Wide Web Consortium (W3C). Para asegurar un campo de juego con todos los dispositivos móviles que soporten Media Queries, sólo agrega la siguiente línea de código en la etiquetade cada página:

Esto le dice a un dispositivo móvil que trate una ventana al mismo ancho del ancho físico del dispositivo. Es más, le dice al iPhone, iPod Touch y iPad que tome en cuenta la orientación para calcular el ancho. Como resultado, puedes usar width con la seguridad que significa lo que realmente es.

Nota: Muchos dispositivos móviles, particularmente el iPhone 4 y iPad 2, tienen pantallas de alta resolución con una densidad de pixel (resolución) mayor a una computadora de escritorio o una laptop. Esto no afecta como calculas el tamaño en pixeles dentro de los CSS. La especificación CSS, dice: si la densidad de pixel del dispositivo, es muy diferente de una computadora, el navegador, debe re-escalar los valores de los pixeles. Algunos desarrolladores, ahora se refieren a medidas en pixeles como CSS pixels.

Como escribir Media Queries

Para agregar un Media Querie al atributo media, tienes que ajustar una o más condiciones con las características de la Tabla 1. Especificas el valor para una característica y después dos puntos, de la misma forma que una propiedad de CSS. Cada condición esta envuelta en paréntesis y se agrega a la declaración con la palabra and. Por ejemplo:

Los Media Queries son Booleanos: sólo pueden ser verdaderos o falsos. Si la condición es verdadera, se aplica el estilo; si es falsa, será ignorada.

Algunas características media, como color, monochrome y grid, se pueden usar como condiciones sin un valor específico. Por ejemplo, la siguiente línea apunta al color de todos los elementos desplegados.

Especificaciones alternativas

No existe la palabra clave or para especificar características media alternativas. En cambio, se enlistan alternativas separadas por coma, de esta forma:

Esto se aplica a pantallas más anchas de 769 pixeles o dispositivos de impresión con un ancho de papel menor a 6 pulgadas.

Especificar condiciones negativas

Para especificar condiciones negativas, puedes preceder la declaración media con la palabra clave «not» de esta forma:

Puedes usar «not» frente a una condición individual. La palabra clave debe ir al inicio de una declaración para negarla por completo. El ejemplo precedente aplica a todos los dispositivos excepto de pantallas monocromáticas.

Esconder Media Queries de navegadores viejos

La especificación de Media Queries también provee la palabra only, que pretende esconder los Media Queries de navegadores viejos. Al igual que not, la palabra clave debe ir al inicio de la declaración. Por ejemplo:

Los navegadores que no reconocen Media Queries, esperan una lista separada por comas de media types, y la especificación dice que se debería truncar cada valor, inmediatamente antes del primer caracter no alfanumérico que no sea un guión. Así que un navegador viejo debería interpretar el ejemplo precedente de esta forma:

Como no existe ningún media type only, el estilo es ignorado. De igual manera, un navegador viejo, deberá interpretar lo siguiente como media=»screen»:

En otras palabras, deberá aplicar las reglas del estilo a todos los dispositivos, incluso aunque no sepa que son los Media Queries. Desafortunadamente, IE 6-8 falla al implementar la especificación correctamente. En lugar de aplicar los estilos a todos los dispositivos, ignora por completo la hoja de estilos.

A pesar de este comportamiento, aún se recomienda agregar el prefijo only a los Media Queries, si deseas esconder todos los estilos de otros navegadores menos comunes.

Tratando con versiones más viejas de Internet Explorer

La falta de soporte para Media Queries en IE 6 hasta IE 8 no es un problema. Simplemente crea un set básico de estilos para todos los navegadores que no usen Media Queries, y utiliza Media Queries para ofrecer una mejor experiencia para visitantes con navegadores más modernos.

Alternativamente, puedes usar una condicional de comentario para Internet Explorer y una serie de reglas para versiones viejas de IE, como estas:

Uso de Media Queries con @import y @media

Adicionalmente a los Media Queries en las etiquetas , al vincular una hoja de estilos externa, se pueden usar con @import y @media. La sintaxis básica es la misma. Por ejemplo, lo siguiente importa una hoja d estilo y aplica los estilos a dispositivos con una pantalla no mayor a 400 pixeles de ancho.

Los Media Queries, se pueden usar dentro de una hoja de estilos como esta:

Prueba de Media Queries

Probar tu código es importante. Para tabletas y smartphones se complican las pruebas ya que idealmente deberías tener una serie dispositivos a tu disposición. Por suerte, puedes probar la mayoría de los Queries sin poseer un dispositivo específico. Siempre es mejor tener algo real enfrente, sin embargo, para el propósito de este artículo, con el uso de un navegador bastará para entender como funcionan los Queries.

El ZIP que acompaña este artículo, contiene un archivo de ejemplo (mediaqueries.html) con tres diferentes diseños vinculados. Puedes utilizar el ejemplo para continuar con la siguiente prueba de tamaños. Con la ventana del navegador completamente abierta, se puede ver el diseño básico del sitio (ver Figura 1). Haz más pequeña la ventana del navegador y puedes observar los cambios mientras pasas por las dimensiones de diferentes dispositivos. Mientras recorres las dimensiones específicas en el código, el estilo de cambiar al de una tableta (Figura 2) o un celular (Figura 3). La imagen de encabezado se hace pequeña para tabletas por ejemplo; los siguientes módulos toman un flujo diferente. Para el estilo de celular, la imagen central desaparece, es sustituida por un menú más grande de botones verticales.

El navegador verifica los Media Queries cada vez que cambia el tamaño de la ventana del navegador o cuando volteas el celular a de una orientación vertical a una horizontal.

Media Queries en Dreamweaver CS5.5

Dreamweaver CS5.5 mejoró el soporte para Media Queries, desde que Adobe introdujo la actualización 11.0.3. El nuevo cuadro de diálogo para Media Queries, te ayuda a mantener tus Media Queries para una sola página o para un sitio completo (ver Figura 5).

Puedes acceder al cuadro de diálogo Media Queries de cualquiera de los siguientes lugares:

• Modify > Media Queries
• Panel Multiscreen Preview > Boton Media Queries
• Menú dropdown Multiscreen > Media Queries
• Opciones del menú del panel CSS Styles
• Menú contextual del panel CSS Styles

Figura 5. Cuadro de diálogo Media Queries en Dreamweaver CS5.5

Con el uso de este cuadro de diálogo podrás:

• Crear múltiples Media Queries.
• Vincular Media Queries a la página actual, que añade vínculos a uno o varios archivos CSS.
• Crear un archivo de ancho de sitio de Media Queries, que vincule a un solo y centralizado archivo CSS que importe otros archivos CSS específicos para cada dispositivo.

En el uso de un archivo de ancho de sitio de Media Queries, puedes vincular archivos existentes CSS o crear nuevos desde el mismo cuadro de diálogo. Incluso puedes crear comentarios arriba del query con lo que quieras agregar como descripción.

Adicionalmente, puedes escoger agregar la etiquetaal documento, que forze al dispositivo reportar sus dimensiones actuales, en lugar del tamaño del valor nominal del viewport. Seleccionar esta opción ayuda a prevenir escalas no deseadas por malos reportes de tamaño.

Nota: Por ahora, el cuadro de diálogo de Media Queries sólo lee y escribe Queries con al menos un valor min-width y max-width. El cuadro de diálogo sólo edita los valores min- y max-. Puedes editar manualmente otros parámetros, pero min-width y max-width son los valores más comunes enfocados a dispositivos.

Ajustes predeterminados y definición de un sitio

El cuadro de diálogo Media Queries incluso provee una opción de presets en la parte inferior del área de lista. Selecciona estos presets y Dreamweaver crea de manera automática:

• Media Queries para una tableta, celular y computadoras de escritorio.
• min-width y max-width con valores iniciales comunes.

El botón de Default Presets provee una forma rápida de iniciar con Media Queries.

Otra manera conveniente de gestionar un archivo de ancho de sitio, es a través del cuadro de diálogo Site Setup. Ahora existe un campo llamado Site-wide Media Query File, en Advanced Settings > Local Info, que especifica el archivo de ancho de sitio. El archivo listado aquí, aparece como la opción cada vez que abres el cuadro de diálogo de Meida Queries. Para un nuevo archivo (o existente) todo lo que tienes que hacer es seleccionar esa opción para aplicar el archivo de ancho Media Query a la página actual.

Nota: Cambiar este archivo, no actualizará de manera automática todos los archivos del sitio.

El cuadro de diálogo Media Queries, ofrece una gran forma de simplificar la creación y gestión de tus Media Queries.

Media Queries son la mejor forma de focalizar dispositivos con diferentes estilos. Como se muestra en la parte superior, no se usan únicamente para smartphones, también se pueden usar para controlar el estilo de cualquier pantalla.

Nota: Esta es una versión actualizada y expandida del artículo original escrito por Donald Booth.

[Descargar Archivos]