Consultas de medios y agentes de escucha

Windows Internet Explorer 9 incorporó compatibilidad con consultas de medios en CSS, HTML, XML y XHTML. Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript admiten los agentes de escucha de consultas de medios. Con las consultas de medios, los desarrolladores web pueden definir el ámbito de una hoja de estilos a un conjunto de funciones de dispositivo específicas, mientras que con los agentes de escucha se puede usar script para reaccionar ante cambios en los medios o en el entorno en los que tu página se esté ejecutando.

Consultas de medios

Las consultas de medios permiten diseñar páginas de distinto modo para los usuarios que exploran en un dispositivo móvil (pantalla de reducidas dimensiones, paleta de colores limitada, baja resolución, etc.), en un equipo ultraportátil (pantalla de reducidas dimensiones, paleta de colores completa, alta resolución, etc.) o en un equipo estándar (gran pantalla, paleta de colores completa, alta resolución, etc.). La lista completa de las propiedades de medios que las consultas de medios de CSS3 admiten se encuentran width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome y resolution.

La siguiente es una declaración de consulta de medios típica en la que se usa la regla @media.


@media screen and (max-width:400px) {div {border:none;}}

En este caso, la pantalla refleja el tipo de medio de destino, y max-width es la propiedad del medio de destino. La declaración pone de manifiesto que las reglas especificadas (sin elementos div o border) solo son válidas cuando la página aparezca en una pantalla con un ancho de 400 píxeles como máximo. Puedes hacer un uso combinado de las propiedades de medios para crear consultas más específicas todavía, como la siguiente.


@media screen and (max-width:400px) and (max-height:600px) {…}

Esta declaración aplica las reglas especificadas cuando el medio tiene una pantalla con un ancho no superior a 400 píxeles y una altura no superior a 600 píxeles.

Agentes de escucha de consultas de medios

Los agentes de escucha de consultas de medios habilitan dos nuevas funcionalidades, que se describen más adelante en este tema:

  • Evaluación de una consulta de medios en tiempo de ejecución con JavaScript
  • Suscripción de los agentes de escucha a los cambios en la evaluación de las consultas de medios

Creación de un agente de escucha de consultas de medios

Para evaluar una consulta de medios en tiempo de ejecución, se crea un objeto MediaQueryList con el nuevo método de ventana matchMedia.

MétodoDescripción

matchMedia(sList)

Acepta una cadena que contiene una o más consultas de medios y devuelve un objeto MediaQueryList.

 

El método matchMedia acepta una cadena de consulta de medios y devuelve un objeto MediaQueryList. En el siguiente ejemplo, se crea una consulta de medios que comprueba si el ancho o el alto de una ventana son inferiores a un determinado tamaño.


mql = window.msMatchMedia("(min-width:450px)");

El objeto MediaQueryList proporciona las siguientes propiedades.

PropiedadDescripción

matches

Devuelve "true" si la lista de consultas de medios coincide con el estado de la ventana actual; de lo contrario, devuelve "false".

media

Devuelve la versión serializada de la lista de consultas de medios que se utilizó para crear el objeto MediaQueryList.

 

El objeto MediaQueryList proporciona los siguientes métodos.

MétodoDescripción

addListener(callback)

Agrega la función de devolución de llamada a la lista de escuchas para el objeto MediaQueryList. La función se llama siempre que cambia la evaluación de las consultas de medios.

removeListener(callback)

Quita la función de devolución de llamada de la lista de escuchas para el objeto MediaQueryList.

 

La propiedad matches es un valor booleano que devuelve una evaluación de la consulta de medios. Usando el ejemplo anterior, matches devuelve true cuando el ancho de la ventana es mayor o igual que el ancho mínimo especificado.


if (mql.matches) 
{
  // Window is fine. 
} else 
{
  // Window is too narrow.       
}

Suscripción de agentes de escucha de consultas de medios

Para detectar cambios en las consultas de medios, puedes suscribir una escucha a un objeto MediaQueryList. El método addListener toma una función de devolución de llamada y la invoca cuando la consulta de medios cambia la evaluación. En el siguiente ejemplo, se usa la consulta de medios anterior para suscribirse a los cambios en la consulta de medios.


mql.addListener(sizeChange); // Size change is the callback function.function sizeChange(mql) 
{
  if (mql.matches) 
  {
    // The window is big enough for content.
  } 
  else 
  {
    // The window has gotten too small for content.
  }
}

El agente de escucha invoca la función de devolución de llamada siempre que cambia el estado de los medios. Si se cambia el tamaño de la ventana para que sea más estrecha que el valor del atributo minwidth especificado, se invoca la función de devolución de llamada. Se la invoca nuevamente cuando la ventana es más ancha que el ancho mínimo. El objeto MediaQueryList se pasa como parámetro a la función de devolución de llamada.

Referencia de API

Media Queries
Media Query Listeners

Ejemplos y tutoriales

Diseñar sitios web adaptativos

Demostraciones de la versión de prueba de Internet Explorer

CSS3 Media Queries & Media Query Listeners

Publicaciones de IEBlog

Adaptar tu sitio a distintos tamaños de ventana
Rincón de CSS: consultas de medios CSS3

Especificación

Consultas de medios
Módulo de vista CSSOM: sección 4.1

Temas relacionados

Responder a distintos dispositivos con consultas de medios de CSS3

 

 

Mostrar:
© 2014 Microsoft