CSS: media query
Dentro da linguagem de marcação CSS, Media query é o recurso utilizado para determinar um conjunto de marcadores de estilo específico para exibir o mesmo conteúdo de um documento HTML em determinada medida de visualização da tela de um 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 (desktops, laptops, tablets, telefones celulares) 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 conforme a folha de estilo do projeto, permitindo que um mesmo conteúdo seja exibido de forma específica 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.
Uma das formas marcação da media query é defini-la no link de importação da folha de estilo CSS do documento HTML, no cabeçalho da página (<head>). O valor media define a media type que receberá a marcação da folha de estilo, no caso, de largura maior que 800px (max-width: 800px):
<html>
<head>
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
</head>
O mais comum é a marcação de media queries no corpo da folha de estilo CSS, onde é possível demarcar as várias opções e condições de visualização. A marcação a seguir define a media query para tamanho de visualização maior que 800px (max-width: 800px).
@media (max-width: 800px)
{
.facet_sidebar
{
display: none;
}
}
Quando a marcação de uma media query é verdadeira, a camada de estilo ou as regras de estilo correspondentes são aplicadas em "cascata" nos elementos definidos na estrutura do documento. Camadas de estilos com media queries ligadas a tag <link> são carregadas por download mesmo que a definição da media query retorne falso (não se aplique ao contexto).
Operadores lógicos
É possível a criação de media queries elaboradas com uso de operadores lógicos not, and, e only.
and
- usado para combinar múltiplas media features em uma mesma media query;
- permite combinar media features com media types.
- requer que cada sequência de características retorne verdadeiro, na ordem, para que a query seja verdadeira;
O exemplo a seguir apresenta uma media query básica: com marcação simples para todos os tipos de visualização, equivalente à media type 'all':
@media (min-width: 700px) { ... }
/* @media - quando não possui marcador específico, aplica-se a todos os tipos de viewport; */
/* (min-width: 700px) - definido para tamanho de tela de no mínimo 700px, ou mais largo; */
Se desejar que a marcação se aplique apenas para telas em landscape (tipo paisagem, horizontal), o operador and deve ser usado para adicionar o tipo de orientação. A media query a seguir é verdadeira se o viewport (tela de visualização do dispositivo) for igual ou maior que 700px e estiver com a posição de orientação definida para landscape:
@media (min-width: 700px) and (orientation: landscape) { ... }
/* @media - quando não possui media type específico, é aplicado a todos os tipos de viewport; */
/* (min-width: 700px) - é aplicado a tamanho de tela de no mínimo 700px ou de largura maior; */
/* (orientation: landscape) - é aplicado somente ao viewport de orientação landscape (paisagem); */
Se deseja que esse contexto seja aplicado para telas de media type TV, é necessário encadear a marcação com o operador and. A media query a seguir é aplicada apenas se a media type for TV, o viewport for igual ou maior que 700px e a tela estiver na posição landscape (horizontal, tipo paisagem).
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
/* @media tv - é aplicado somente à media type TV; */
/* (min-width: 700px) - é aplicado somente a tamanho de tela de no mínimo 700px ou de largura maior; */
/* (orientation: landscape) - é aplicado somente ao viewport de orientação landscape (paisagem); */
not
- usado para negar uma media query inteira;
- usado para aplicar um estilo apenas se a query inteira for igual;
- útil para prevenir que navegadores antigos apliquem os estilos selecionados;
- é necessário especificar um tipo de media explícito.
A palavra chave not se aplica em toda a media query e retorna verdadeiro,
caso contrário retorna falso (tal como monochrome como cor de tela ou uma tela de largura de 600px com um min-width: 700px recurso consultado).
Um not vai apenas negar a media query que é aplicada, de modo não toda a media query que apresente uma media querie com uma lista separada por vírgulas.
A palavra chave not não pode ser usada para negar uma característica individual da query, apenas uma media query inteira. Por exemplo, o not é avaliado por último na query seguinte:
@media not all and (monochrome) { ... }
Isto significa que a query é avaliada assim:
@media not (all and (monochrome)) { ... }
... em vez disso:
@media (not all) and (monochrome) { ... }
Um outro exemplo, veja a media query seguinte:
@media not screen and (color), print and (color)
É avalida desta forma:
@media (not (screen and (color))), print and (color)
only
- é necessário especificar um tipo de media explícito.
Observação: A menos que sejam definidos os operadores not ou only, o media type é opcional e o tipo all será implícito; é possível combinar múltiplas medias queries em uma lista separadas por vírgulas. Se qualquer uma das media queries da lista for verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador or.
