Media Query CSS: o que é, para que serve e quando utilizar?

A evolução da tecnologia é um processo constante e acelerado. Todos os anos são lançados novos dispositivos com proporções divergentes das atuais. Devido a isso, é necessário que as nossas aplicações web acompanhem essas mudanças para manter o layout dos nossos sites responsivos e adaptáveis a qualquer tamanho de tela.

Já pensou se os desenvolvedores tivessem que alterar o código e o design de um projeto todas às vezes que lançasse um dispositivo novo? Não valeria a pena o trabalho e muito menos o investimento das empresas.

Para facilitar e resolver esse tipo de problema de renderização, existe o Media Query. Nesse artigo entenderemos melhor como utilizá-lo em nossas estilizações.

O que é Media Query CSS?

O Media Query é um recurso do CSS que visa facilitar o processo de configuração e renderização dos elementos de um site em diferentes tamanhos de tela. Dessa forma, independente do dispositivo que o usuário estiver utilizando, o site irá se adaptar e ficar totalmente responsivo, sem quebras de layout.

Para que serve o Media Query CSS?

Imagine que esteja acessando um site em seu computador. O seu monitor é muito maior que a tela do seu celular, por exemplo. Portanto, o site irá ocupar todo o espaço disponível para criar uma visualização melhor e uma boa experiência ao usuário. Quando acessar esse mesmo site em seu smartphone, perceberá que alguns elementos sofrerão mudanças, se adaptando ao tamanho de tela do seu dispositivo. Assim, os desenvolvedores conseguem manter seus sites responsivos, evitando problemas de renderização.

Sintaxe

A utilização desse recurso em nosso CSS funciona de maneira bem simples. Por variar das Media Types e das Media Features, é necessário que retornemos um valor booleano (verdadeiro ou falso) para que os navegadores consigam interpretar corretamente essa funcionalidade.

Para isso, precisamos chamar a função do Media Query através da sintaxe:

Dessa forma, estamos dizendo ao nosso navegador que todos os dispositivos que possuírem a largura de tela menor que 1024px receberão aquela estilização específica.

Operadores lógicos

Na utilização desse recurso também é possível a aplicação de operadores lógicos como o and, not e only.

Funciona basicamente da mesma forma que na lógica de programação. O operador and possibilita combinar sequências de Media Features caso a sentença seja verdadeira. No exemplo abaixo, estamos dizendo que se o tipo de media for uma tela e esta possuir tamanho máximo de 1024px, será aplicado o código CSS ali presente.

O operador not é utilizado para negar uma Media Query, porém a sua utilização é muito rara. 

Já o operador only possui a função de aplicar estilos se a Media Query for igual. Porém, sua utilização é apenas para auxiliar os navegadores antigos a interpretarem esses códigos.

Media Feature

A Media Feature possui como funcionalidade a interpretação da resolução e largura do dispositivo que está sendo usado pelo usuário para acessar o site, auxiliando na responsividade em diferentes tamanhos de tela. 

Essa interpretação e identificação dos dispositivos pode ser feita utilizando diversos recursos disponíveis nessa ferramenta, como, por exemplo, a altura (height), largura (width) e cor (color).

Media Types

A Media Types foi a primeira grande solução que revolucionou a forma como as pessoas desenvolvedoras criam os layouts de uma aplicação web. Através dela, é possível interpretar qual o tipo de dispositivo está sendo utilizado pelo usuário, fazendo com que a estilização se adapte aquela tela em específico.

Por que e quando usar Media Query?

A principal tarefa de uma pessoa desenvolvedora é solucionar problemas e criar uma boa experiência para o usuário. É essencial que, ao desenvolver uma aplicação web, a preocupação com o layout e o visual da página seja uma das prioridades. Afinal, ninguém gostaria de entrar em um site que se comportasse de maneiras diferentes em diversos dispositivos, funcionando somente no Desktop, por exemplo.

Dessa forma, precisamos estar sempre atentos à questão da responsividade. A utilização do Media Query em nossas estilizações é fundamental para tornarmos possível essa adaptação a qualquer tamanho de tela.

Boas práticas ao usar Media Queries:

Assim como em outras áreas da programação, devemos seguir algumas boas práticas ao utilizarmos essa ferramenta em nosso código. Abaixo veremos como tornar nosso CSS melhor utilizando as Media Queries:

1. Inicie pelo mobile

Uma das tendências do mercado de trabalho atualmente é o mobile first. Afinal, milhões de pessoas em todo o mundo utilizam smartphones em seu dia-a-dia para acessar a internet.

Para a pessoa desenvolvedora, a utilização dessa prática significa que, ao começar a estilização de uma aplicação, deve priorizar sempre os dispositivos móveis, adaptando os elementos para Desktop conforme a necessidade. Isso faz com que o código se torne mais prático e enxuto, tendo em vista que as telas menores tendem a possuir menos informações.

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

Padronização de código é fundamental para um bom desenvolvedor. Portanto, não misture a utilização de diferentes sintaxes em uma mesma aplicação. Ao estilizar o seu projeto, escolha qual a prática você utilizará: mobile first ou desktop first.

Caso sua escolha seja pelo desktop, a sintaxe utilizada deverá ser a max-width, pois assim conseguimos criar regras de estilizações para telas que contenham até determinada largura.

Por outro lado, se escolher o mobile, deverá utilizar o min-width, estilizando e adaptando as telas que contenham no mínimo determinada largura estabelecida na sintaxe.

3. Utilize novas tecnologias

A tecnologia está sempre em constante evolução, e regularmente surgem novas ferramentas e recursos que facilitam ainda mais a vida da pessoa desenvolvedora. Esteja sempre atento a essas mudanças, mantendo-se atualizado e preparado para o mercado de trabalho.

Atualmente, existem dois tipos de display no CSS que auxiliam muito no desenvolvimento e responsividade dos projetos: o Flexbox e o CSS Grid. Utilize-os para complementar a utilização do Media Query e melhorar seus códigos.

Exemplos de uso de Media Query

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

Para deixarmos tudo mais claro e facilitar o seu entendimento sobre o conteúdo, criaremos uma estilização responsiva utilizando Media Query.

Primeiramente, vamos criar um arquivo index.html, que irá conter o link para a nossa folha de estilo externa e alguns elementos que sofrerão mudanças em suas propriedades.

Em nosso arquivo index.css, iremos criar uma estilização básica para os nossos elementos.

Em tela, teremos o seguinte resultado:

Agora, utilizaremos as Media Query para alterar as cores desses elementos de acordo com os tamanhos estabelecidos. A primeira div mudará de cor quando a tela possuir no mínimo 1024px. Já a segunda div, sofrerá essa mudança quando a tela possuir a largura máxima até 768px. Na terceira, ocorrerá a mesma coisa, porém com a largura máxima de 400px.

O resultado final da nossa estilização ficará assim:

Qual a compatibilidade do Media Query CSS com navegadores?

De acordo com o site Can I use, atualmente as Media Queries já são compatíveis com a maioria dos navegadores. Portanto, não fique receoso sobre a sua utilização em seus códigos.

Conclusão

Como percebemos nesse artigo, criar uma aplicação web responsiva e totalmente adaptável a diferentes dispositivos é essencial para uma boa experiência do usuário. Se você deseja se tornar uma pessoa programadora com um diferencial no mercado, é fundamental que você entenda sobre esse assunto e aplique-o em seus projetos.
Aqui na Kenzie Academy Brasil, além de prepararmos os nossos estudantes para lidar com todas as exigências do mercado de trabalho, também ensinamos sobre CSS e essa ferramenta poderosa chamada Media Query. Comece agora mesmo os seus estudos em programação e dê um passo a mais na sua carreira!