¿Qué es Media Queries?

Significado de Media Queries (Qué es y Definición)

Las consultas multimedia son una característica de CSS que permite que el contenido de página web se adapte a diferentes tamaños y resoluciones de pantalla. Son una parte fundamental del diseño web responsivo y se utilizan para personalizar la apariencia de los sitios web para múltiples dispositivos.

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

@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 del usuario tiene 768 píxeles de ancho o menos. Esto podría ocurrir si se encoge la ventana en un ordenador de sobremesa o si se utiliza un dispositivo móvil, como una tableta, para ver la página web.

En el diseño web responsivo, las consultas de medios actúan como filtros para los diferentes tamaños de pantalla. Como todos los módulos dentro de una hoja de estilo en cascada, los que aparecen más abajo en la lista anulan a los que están por encima. Por lo tanto, los estilos por defecto suelen definirse primero dentro de un documento CSS, seguidos de las consultas de medios para los diferentes tamaños de pantalla. Por ejemplo, los estilos de escritorio podrían definirse primero, seguidos de una consulta de medios con estilos para usuarios de tabletas, seguidos de una consulta de medios diseñada para usuarios de teléfonos inteligentes. Los estilos también pueden definirse en el orden inverso, lo que se considera un desarrollo “mobile first”.

Si bien el min-width es, con mucho, la característica más común utilizada en las consultas de medios, también existen muchas otras. Algunos ejemplos son min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation y resolution. El valor de la resolución, por ejemplo, puede utilizarse para detectar pantallas HiDPI (como pantallas de retina) y cargar gráficos de alta resolución en lugar de imágenes estándar.

La definición de Media Queries en esta página es la definición original de SharTec.eu.
El objetivo de SharTec.eu es explicar la terminología informática de una manera fácil de entender. Nos esforzamos por ser simples y precisos en todas las definiciones que publicamos. Si tiene algún comentario sobre la definición de Consultas a los medios de comunicación o desea sugerirnos un nuevo término técnico, póngase en contacto con nosotros.