Definición

Un media query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color. Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo.

Añadidos en CSS3, los media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí. Es lo que se llama en inglés un diseño responsive, o sea, que se adapta a cada dispositivo según el tamaño de la pantalla.

Sintaxis

Definición

Un media query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color. Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo.

Añadidos en CSS3, los media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí. Es lo que se llama en inglés un diseño responsive, o sea, que se adapta a cada dispositivo según el tamaño de la pantalla.

Sintaxis

Los Media queries constan de un media type, respresentado en CSS por @mediay de una o más expresiones, implicando características del medio, la cual se resuelve como verdadera o falsa. El resultado de la consulta es verdadera si el tipo de medio especificado en el media query concuerda con el tipo de dispositivo que está siendo mostrado y todas las expresiones en el media query son verdaderas.

Los queries son insensibles a las mayúsculas o minúsculas (case insensitive). Media queries que contengan tipos de medios desconocidos siempre retornarán falso.

Como cualquier otro elemento de estilo, los media queries se pueden usar en un elemento <link /> del HTML, que hará referencia a un archivo con extensión .css:

<!-- CSS media query un elemento link -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

O bien directamente, sin pasar por el elemento link:

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>