Consultas de medios

Las consultas de medios son una función de CSS que permite que el contenido de una página web se adapte a diferentes tamaños y resoluciones de pantalla. Son una parte fundamental del diseño web adaptable y se utilizan para personalizar la apariencia de los sitios web en varios dispositivos.

Las consultas de medios pueden insertarse dentro del HTML de una página web o incluirse en un archivo .CSS independiente al que hace referencia la página web. A continuación se muestra un ejemplo de una consulta de medios sencilla:

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

La consulta de medios anterior se activa si la ventana del navegador de un usuario tiene un ancho de 768 píxeles o menos. Esto puede ocurrir si reduce el tamaño de la ventana en una computadora de escritorio o si utiliza un dispositivo móvil, como una tableta, para ver la página web.

En el diseño web adaptable, las consultas de medios funcionan como filtros para diferentes tamaños de pantalla. Al igual que todos los módulos de una hoja de estilos en cascada, las que aparecen más abajo en la lista reemplazan a las que están arriba. Por lo tanto, los estilos predeterminados normalmente se definen primero en un documento CSS, seguidos de las consultas de medios para diferentes tamaños de pantalla. Por ejemplo, los estilos para computadoras de escritorio pueden definirse primero, seguidos de una consulta de medios con estilos para usuarios de tabletas y luego de una consulta de medios diseñada para usuarios de teléfonos inteligentes. Los estilos también pueden definirse en el orden opuesto, lo que se considera desarrollo "orientado primero a dispositivos móviles".

Aunque min-width es, con mucha diferencia, la función más utilizada en las consultas de medios, también hay muchas otras disponibles. Algunos ejemplos son min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation y resolution. El valor resolution, por ejemplo, puede utilizarse para detectar pantallas HiDPI como las (pantallas Retina) y cargar gráficos de alta resolución en lugar de imágenes estándar.