O que é media query

Você sabe o que é media query e como essa técnica pode ser aplicada? Neste guia vamos falar tudo sobre o assunto, trazendo o conceito, algumas noções básicas e exemplos de como você pode aplicar esse recurso na prática.  

Conceito de media query

Para entender melhor o que é e como usar a media query é preciso fazer um curso online ou capacitação sobre o tema. Mas você pode ir se familiarizando com o conceito geral, de modo a se preparar para usar a técnica. 

Em linhas gerais, a media query é um conjunto de técnicas de consulta de mídia. Com a sua utilização é possível aplicar diversos estilos de CSS, com base nas diferentes resoluções de rela. 

A consulta de mídia CSS visa fornecer uma maneira de aplicar CSS apenas quando o ambiente do navegador e do dispositivo são compatíveis com uma regra especificada, como por exemplo ter mais de 480 pixels.

Dessa forma, um dos principais objetivos da media query é garantir sites, aplicativos e páginas mais responsivas. A técnica permite a identificação da resolução da tela, com aplicação de visuais compatíveis com cada resolução.  

Podemos dizer que as consultas de mídia são uma parte essencial do design responsivo da web. Essas técnicas permitem criar layouts diferentes, dependendo do tamanho da tela de exibição.

No entanto, essa não é a sua única função. Os recursos também podem ser usadas para detectar outras coisas sobre o ambiente em que o site está sendo executado. Um exemplo é o uso de um dispositivo sensível ao toque, que pode ser detectado.

Em outras palavras, podemos dizer que a media query é uma técnica para definir condições para que os estilos CSS sejam utilizados. Os estilos só são aplicados se o dispositivo usado estiver dentro das condições indicadas.

A importância da media query

Desde o ano de 2012 o World Wide Web Consortium (W3C), que é a maior organização de padronização da rede mundial de computadores, recomenda a media query. Isso se deve ao fato de que esse padrão é mais avançado para a definição de estilos.

Como informamos acima, a media query funciona como uma consulta de mídia. O CSS faz a consulta com relação ao navegador, para identificar qual foi o dispositivo ou mídia empregado para a visualização da página. 

A partir dessa informação, são aplicados estilos diferentes, compatíveis com cada mídia. Vale a pena notar que a identificação acontece de forma rápida, em tempo real. Dessa forma os estilos mudam de forma automática.

Um dos focos da media query está justamente no tamanho da tela do dispositivo que está sendo usado para acessar um site. A resolução é um dos critérios para a escolha dos estilos a serem aplicados.

Como esse conceito é aplicado

É possível usar media query através de operadores lógicos. Entre eles estão o “noto”, o “and” e o “only”. O “and” é usado com o objetivo de combinar várias media features dentro de uma única media query.

Já o operador “not” é aplicado com o intuito de negar uma media query em sua completude. Por fim, temos como exemplo o operador “only”, que aplica um determinado estilo quando a media query é igual de forma completa.

Exemplos de media query

Agora que já falamos sobre o conceito de media query, vale a pena conhecer alguns exemplos de como essa técnica pode ser aplicada. Por se tratar de um recurso muito útil, vale a pena ter em mente as suas várias formas de uso.

São vários os detalhes que podem ser verificados na tela de um dispositivo. Essas são algumas propriedades que podem ser aprendidas em um curso online sobre media query. Indicamos também qual é o objetivo principal da sua utilização.

WIDTH

Valor: <largura>

Aplica em: Tipos de mídia visual e tátil

Aceita prefixo max/min: sim

A propriedade "width" serve para descrever a largura da tela do dispositivo, de modo a incluir a barra de rolagem.

HEIGHT

Valor: <altura>

Aplica em: Tipos de mídia visual e tátil

Aceita prefixo max/min: sim

A propriedade "height" serve para descrever a altura da tela do dispositivo, considerando também a barra de rolagem.

DEVICE-WIDTH

Valor: <largura>

Aplica em: Tipos de mídia visual e tátil

Aceita prefixo max/min: sim

A propriedade "device-width" serve para descrever a largura da tela do dispositivo usado para o processamento do layout.

DEVICE-HEIGHT

Valor: <altura>

Aplica em: Tipos de mídia visual e tátil

Aceita prefixo max/min: sim

A propriedade "device-height" serve para descrever a altura da tela do dispositivo usado para o processamento do layout.

ORIENTATION

Valor: portrait | landscape

Aplica em: Dispositivos com orientação da mídia

Aceita prefixo max/min: não

A propriedade "orientation" serve para descrever se o dispositivo está no estado paisagem ou no estado retrato.

ASPECT-RATIO

Valor: <ratio>

Aplica em: Dispositivos de mídias do tipo bitmap.

Aceita prefixo max/min: sim

A propriedade "aspect-ratio" serve para descrever a razão existente entre os valores de width e height da tela do dispositivo.

DEVICE-ASPECT-RATIO

Valor: <ratio>

Aplica em: Dispositivos de mídias do tipo bitmap.

Aceita prefixo max/min: sim

A propriedade "device-aspect-ratio" serve para descrever a razão existente entre os valores de device-width e device-height da tela do dispositivo.

Informações importantes sobre media querys

Existem alguns detalhes importantes sobre a media query. Um deles diz respeito ao fato de que esse tipo de técnica é compatível com operadores. Esses operadores são similares aos de comparação, usados geralmente na linguagem de programação.

Entre esses operadores estão o and, not e or, sendo esse último usado em uma versão diferenciada. O “or” não existe quando falamos de media query, mas é possível separar as condições com o auxílio de uma vírgula, com resultado equivalente. 

Já o operador “not”, por sua vez, funciona apenas para uma única condição. Dessa forma, para fazer uma nova condição é preciso utilizar o “not” novamente.

Conclusão

Neste guia falamos sobre o conceito de media query, como funciona essa técnica, quais são os seus benefícios e como pode ser aplicado na prática. Esse é um módulo que oferece muitas vantagens, entre eles deixar suas páginas mais responsivas.