CSS: media query

Dentro da linguagem de marcação CSS, Media query é o recurso utilizado para determinar o conjunto de marcadores de estilo específico para exibir um mesmo conteúdo Web em determinada medida de visualização da tela de dispositivos de exibição. O recurso Media query é muito utilizado para a construção de sítios Web responsivos, onde a cada tipo de dispositivo de exibição, o conteúdo seja adaptado para melhor visualização do usuário. Marcadores de exibição de elementos de página, como largura, altura, cores, estilos e tamanho de fontes de texto, por exemplo, podem ser definidos a cada Media query definida na folha de estilo do projeto, permitindo que um mesmo conteúdo seja exibido de forma peculiar a cada dispositivo utilizado.

Sintaxe

Media queries consistem formas de media type e podem conter uma ou mais expressões que determinam se são verdadeiras ou falsas uma determinada especificação CSS3 expressa em media features. Os resultados de uma query são verdadeiros se o tipo de media type especificado na media query corresponde ao tipo do documento exibido no dispositivo e todas as expressões na media query são verdadeiras.

<nolink><!- CSS media query em um elemento de link -></nolink>
<nolink><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /></nolink>
<nolink><!- CSS media query dentro de um stylesheet -></nolink>
<style>
@media (max-width: 600px)
{
 .facet_sidebar
  {
   display: none;
  }
}
</style>

Quando uma media query é verdadeira, a camada de estilo ou as regras de estilo correspondentes são aplicadas seguindo o padrão de regras aplicadas em "cascata". Camadas de estilos com media queries ligadas a tag <link> são carregadas por download mesmo que suas medias queries retornem falso (caso não se aplicam ao contexto).

A menos que sejam definidos os operadores not ou only, o media type é opcional e o tipo all será implícito.

Operadores lógicos

É possível se propor media queries elaboradas a partir dos operadores lógicos not, and, e only.

O operador and é usado para combinar múltiplas media features em uma mesma media query, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a query seja verdadeiro.

O operador not é usado para negar uma media query inteira.

O operador only é usado para aplicar um estilo apenas se a query inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadores not ou only, você tem que especificar um tipo de media explícito.

Você também pode combinar múltiplas medias queries em uma lista separadas por vírgulas, se qualquer uma das media queries na lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador or.