A tecnologia avança quase que na velocidade da luz, e frequentemente são lançados dispositivos novos e mais robustos que trazem uma experiência melhor para a pessoa usuária. Porém, como os sites conseguem acompanhar essa evolução constante? A resposta é simples: Media Query CSS!

Você já deve imaginar que, para cada dispositivo, seja desktop ou um celular, as configurações para renderização de página mudam, pois ninguém quer que quando alguém entre no site pelo celular, todos os links estejam quebrados ou que as páginas nem sequer sejam renderizadas.

Para simplificar o processo de renderização para diferentes dispositivos, temos a Media Query. Essa função facilita o processo de configuração para que o site se adapte de acordo com o dispositivo que está sendo usado.

Confira o que veremos nesse texto a seguir:

• O que é Media Query CSS e para que serve?
• Sintaxe
• Entenda a estrutura do Media Query
• Por que e quando usar media queries?
• Operadores Lógicos Media Query
• Boas práticas ao usar Media Queries
• Exemplos de uso de Media Query
• Qual a compatibilidade do Media Query CSS com navegadores?

Boa Leitura!

O que é Media Query CSS e para que serve?

A Media Query permite que sejam aplicadas diversas formatações para atender diferentes dispositivos. Mas calma, vamos entender melhor.

Ao navegar por um site, como agora, você está utilizando um tipo de dispositivo, talvez seu notebook, talvez seu celular ou tablet. Vamos pressupor que você esteja acessando nosso site pelo seu notebook.

O nosso site foi renderizado para preencher toda a tela do seu notebook para que você tenha uma excelente experiência e consiga consumir da melhor forma as informações que aqui contém. Porém, a tela do seu notebook é muito maior que a tela do seu celular.

Se você pegar seu celular e acessar novamente o nosso site, ele estará adaptado novamente. Agora você verá as informações mais comprimidas, porém, elas continuam renderizadas, dessa vez de forma diferente, pois a tela do seu celular tem configurações diferentes da tela do seu notebook.

E a Media Query traz exatamente isso, ela permite que o desenvolvedor ou desenvolvedora adapte o site ou aplicação para diferentes dispositivos, para que a pessoa usuária sinta a diferença da forma mais sútil possível, sem nenhum incômodo.

Sintaxe

As Media Query derivam da Media Type, e, para que a aplicação interprete corretamente as especificações CSS3 disponibilizadas, temos as chamadas Media Features, que retornam verdadeiro ou falso.

Para que o retorno seja verdadeiro, é preciso que o retorno da Media Type, que é especificado na Media Query, esteja de acordo com o tipo de documento do dispositivo.

Para que a sua estilização seja renderizada, é necessário indicar qual o caminho da sua página de estilo dentro do HTML, para isso, basta declarar no Head a seguinte sintaxe:

<link rel=“stylesheet” href=”estilo.css”>

E dentro da sua página de estilo, você pode fazer as configurações necessárias para que o documento HTML seja renderizado de acordo com as especificações de diferentes dispositivos.

Na sua página de estilo, você pode deixar um código padrão, visando atender as requisições de navegadores — que é o acesso mais comum — e especificar o restante da seguinte forma: 

@media screen and (min-width: 768px) {

Dessa forma, você pode estilizar de acordo com cada dispositivo. Neste exemplo, o tamanho 768px é mais voltado para tablets, portanto, tendo bem especificado qual o público do site e por onde as pessoas vão acessar, você pode ir configurando de acordo com essa análise. Por exemplo, se você está fazendo um site voltado para vídeos, é importante saber que é possível que pessoas acessem pela TV, logo, é de suma importância que essa configuração seja feita.

Entenda a estrutura do Media Query

Como mencionado acima, a Media Query é uma derivação da Media Type e elas fazem uso da Media Features para direcionar corretamente a folha de estilo para cada dispositivo, mas vamos entender cada uma delas;

Media Types

A Media Types foi a primeira solução criada para atender a necessidade de interpretação em diferentes dispositivos para que, ao interpretar qual o dispositivo que o usuário ou usuária está utilizando, fosse direcionado o CSS correto para renderizar a página.

A Media Types também ajuda a definir a impressão de páginas, por exemplo, se o seu site fornece a opção de baixar um artigo, ao fazer o download, é necessário desconsiderar o cabeçalho da página, o menu, rodapé e afins, pois a pessoa só precisa das informações do artigo, e a Media Types ajuda nisso.

Media Features

A Media Feature é responsável por interpretar qual a resolução do dispositivo que está sendo usado para acessar o site. Com isso, ela direciona a formatação certa para o tipo de dispositivo.

Para identificar diferentes dispositivos, podemos utilizar alguns recursos, como:

• Height
• Width
• Color
• Color-index
• Scan
• Grid

E muitos outros. Esses recursos permitem que configuremos tamanhos, cores e muito mais para diferentes resoluções;

Operadores lógicos Media Query

Para casos mais complexos, temos os Operadores lógicos, que são:

•  and
•  not
•  only

Esse caso não foge muito da lógica de programação, onde o operador and nos permite combinar sequências de Media Features caso a sentença seja verdadeira, por exemplo:

@media (min-width: 768px) and (orientation: portrait)

Se a configuração do dispositivo for 768px E a orientação da janela estiver no modo retrato, me traz a estilização para tablet.

Já o operador not, é utilizado quando queremos negar uma Media Query por completo. Por exemplo, você precisa retornar propriedades, porém, essas propriedades só devem aparecer caso o elemento não esteja vazio. Basta fazer: 

.foo:not( :empty)

E por fim, o Only que tem a função de aplicar um estilo se a query for igual. Porém, o Only é mais utilizado visando a interpretação de navegadores antigos que não suportam as medias queries com medias features.

Por que e quando usar media queries?

É fundamental que, ao criar um site, o desenvolvedor ou desenvolvedora se preocupe com a experiência da pessoa usuária. Para isso, é necessário ter em mente que o público que acessará aquele site pode ser muito diverso, podendo ser acessado por vários dispositivos diferentes. Assim, o site deve se adaptar para atender a essas diferentes requisições.

Portanto, se você estiver criando um site ou qualquer aplicação, por mais pequena e simples que seja, porque não já não deixá-la adaptada para atender diferentes dispositivos?

Imagine você que está aqui lendo nosso artigo. Não seria extremamente frustrante se você tentasse acessar o site pelo celular e simplesmente não conseguisse porque ele está preparado apenas para ser renderizado em telas grandes? Então, independentemente do porte do seu site, adote as configurações para abranger o máximo de possibilidades que puder!

Boas práticas ao usar Media Queries

1. Comece pelo mobile

É comum que as pessoas desenvolvedoras comecem o desenvolvimento do sistema visando a tela de um desktop e, depois de ter tudo desenvolvido, comece a adaptar para telas menores, como tablets e celulares.

Porém, com a correria do dia a dia, pessoas transitando por metrô, ônibus, é muito mais comum o acesso por mobile, logo, por que não começar por ai? Afinal, é mais simples, pois quando você acessa um site pelo seu celular você verá apenas uma coluna contendo o essencial.

Começar o desenvolvimento visando o mobile, além de tornar o código mais simples e enxuto, ajuda na agilidade do desenvolvimento. Ao começar visando o desktop, quando você adaptar para telas menores, é possível que você tenha que desfazer códigos.

2. min-width ou max-width, utilize um!

Não é interessante fazer uso de sintaxe diferentes quando você pode trabalhar com apenas uma por todo projeto, afinal, a sua aplicação pode se tornar muito complexa.

Portanto, mantenha uma padrão e o utilize por todo o projeto, assim, você ou outra pessoa que for mexer no projeto terá muito mais facilidade ao encontrar um problema e resolvê-lo.

3. Faça uso de novas tecnologias

Como dito mais acima, o mercado tecnológico se expande em uma velocidade impressionante, e esse avanço vem para facilitar cada vez mais a vida da pessoa desenvolvedora, portanto, se atualize em relação às novas tecnologias que estão em alta no mercado e dê preferência a elas quando for desenvolver algo novo.

Temos hoje o flexbox e o CSS grid,que facilitam muito o desenvolvimento e a complexidade do código, pois eles evitam o uso exagerado de media query, o que diminui a quantidade de código. 

Exemplos de uso de Media Query

 Usando Media Query em CSS e HTML utilizando -min e -max

Agora vamos mostrar um exemplo do uso de Media Query utilizando apenas o HTML e o CSS.

Primeiro, vamos criar o nosso documento HTML e as nossas div’s, denominando uma propriedade única (modo) e uma propriedade única (um, dois, três);

Veja que já estamos importando a nossa página de estilo dentro do head, portanto, vamos fazer as devidas estilizações no nosso estilo.css que já importamos.

E o resultado no navegador será:

Qual a compatibilidade do Media Query CSS com navegadores?

Característica	Chrome	Firefox	Internet Explore	Opera	Safari
Suporte básico	21	3.5	9.0	9	4

Característica	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
Suporte básico	SIM	SIM	?	SIM	SIM

Como você pode perceber até aqui, compreender e utilizar Media Querys é fundamental para que seu site esteja preparado para suportar diversos dispositivos, assim, qualquer pessoa que navegue pelo site ao trocar de dispositivo não ficará frustrada ao não conseguir visualizar a aplicação por simplesmente ter trocado de aparelho.

Portanto, é imprescindível que você conheça e aplique a Media query sempre que for desenvolver algo que diversas pessoas diferentes, em locais diferentes, acessarão.

E se você gostou deste artigo, confira CSS margin: como definir as margens de um elemento!