Media query

En desarrollo web, las media queries son un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo como la resolución de pantalla (por ejemplo, un smartphone frente a pantallas de alta definición) o la presencia de características de accesibilidad como el braille. Se convirtió en un estándar recomendado por la W3C en junio de 2012.^[1]​ y es un principio básico de la tecnología de Diseño web adaptativo.

Las media queries se esbozaron por primera vez en la propuesta inicial de CSS de Håkon Wium Lie en 1994,^[2]​ pero no se convirtió en parte de CSS1. La recomendación HTML4 de 1997 muestra un ejemplo de como podría agregarse en el futuro.^[3]​ En el 2000, la W3C comenzó a trabajar en las media queries y también en otro esquema para el soporte de varios dispositivos: CC/PP. Las 2 acciones estaban orientadas al mismo problema, pero CC/PP es centrado en el servidor, mientras los Media Queries están centrados en el cliente.^[4]​ El primer borrador público para Medias Queries fue publicado en 2001,^[5]​ y la especificación se convirtió en una recomendación de la W3C en 2012 después que los navegadores le dieran soporte.

Una media query consiste de un media type y una o más expresiones, que implican media features, que se resuelve en true o false. El resultado de la consulta es verdadero si el media type especificado en el media query coincide con el tipo de dispositivo sobre el que el documento está siendo mostrado y todas las expresiones del media query son verdaderas. Cuando un media query es verdadero, se aplica la hoja de estilo correspondiente o las reglas de estilo, siguiendo las reglas normales en cascada.^[6]​

Esto es un simple ejemplo:

@media screen and (min-width:500px) { ... }

Un media type puede ser declarado en la cabecera de un documento HTML usando el atributo "media" dentro de un elemento <link>. El valor específico del atributo "media" indica en que dispositivo el documento vinculado será mostrado.^[7]​ Media types también pueden ser declarados dentro de instrucciones de procesamiento XML, el @import at-rule, y el @media at-rule. CSS2 definen los siguientes media types:^[8]​

• braille
• embossed
• handheld
• print
• projection
• screen
• speech
• tty
• tv

El media type "all" también puede ser usado para indicar que las hojas de estilo apliquen todos los media types.^[9]​

La siguiente tabla contiene los atributos media recogidos de la última recomendación de la W3C para media queries, el 6 de junio de 2007.^[10]​

• W3C – Media Queries recommendation 19 June 2012
• W3C – CSS specs > Media Queries
• Examples of Media Queries usage Archivado el 20 de octubre de 2013 en Wayback Machine.
• Sitepoint – Media Queries