¿Qué significa consulta de medios?
Una consulta de medios o media query en inglés es una funcionalidad HTML/CSS que permite que el contenido de una página web se adapte al tipo de medio en el que se está representando la página, como la pantalla de un ordenador o la de un teléfono o tableta.
Se considera una tecnología básica para implementar el diseño web responsivo y se recomendó su implementación como estándar en junio de 2012 junto con otras funcionalidades de CSS3.
Definición de consulta de medios
Las consultas de medios consisten en un tipo de medio junto con una o más expresiones que comprueban condicionalmente determinadas características de los medios, en particular la de los tamaños de pantalla.
Las expresiones lógicas de una consulta de medios pueden ser verdaderas o falsas; es verdadera si el tipo de medio de la consulta coincide con el tipo de medio del dispositivo en el que se ejecuta el agente de usuario (navegador web); en caso contrario, es falsa.
Cuando la consulta de medios resulte verdadera, se aplicarán las correspondientes reglas de estilo especificadas, siguiendo las reglas normales de cascada. Debe tenerse en cuenta que, incluso si la consulta resulta falsa, las hojas de estilo especificadas dentro de la etiqueta <link> se siguen descargando, pero simplemente no se aplican.
Ejemplo utilizando la etiqueta HTML <link>:
<link rel=«stylesheet» media=«(max-width: 600px)» href=«specific.css» />
Ejemplo utilizando @media dentro de la etiqueta <style>:
<style>
@media (max-width: 500px){
.left_sidebar {display: none; }
}
</style>