Como usar consultas de mídia em JavaScript?

Feb 11 2023

Pode ser bastante comum observar redimensionamentos em javascript (para realizar algumas funcionalidades). É comum lidar com essa situação adicionando um event listener no “resize”, o que não é a melhor solução para esse problema, pelo menos na maioria dos casos.

Neste artigo, demonstrarei uma maneira eficaz de lidar com essas situações em JavaScript. Compararei duas abordagens que realizam a mesma coisa: o método matchMedia e o ouvinte de evento “resize”.

Mostrarei os prós e contras de cada método, mostrarei como usá-lo e darei exemplos ao longo do caminho.

“O método Windowda interface matchMedia()retorna um novo MediaQueryListobjeto que pode ser usado para determinar se documentcorresponde à string de consulta de mídia, bem como para monitorar o documento para detectar quando ele corresponde (ou para de corresponder) a essa consulta de mídia.”

Primeiro, precisamos entender que o método matchMedia é semelhante às consultas de mídia CSS, que é o principal ingrediente de qualquer design responsivo.

@media (min-width: 768px) {
  body {
    background-color: coral;
  }
}

O método matchMedia() retorna uma MediaQueryList com os resultados da consulta.

o mediaQueryList é um objeto com 3 propriedades:

corresponde: (verdadeiro/falso) se a tela atende ou não às condições para a consulta de mídia
media: (string) a própria consulta de mídia, basicamente a string que você inseriu
onchange: (função) método de escuta que aceita uma função de retorno de chamada que é invocada quando o status da mídia muda.

O uso é quase idêntico às consultas de mídia CSS. Passamos a string de consulta de mídia para matchMedia() e então verificamos a propriedade “matches”.

window.matchMedia("min-width: 768px").onchange = (e) => {
  if (e.matches) {
    // the screen was below 768 and now it's above or equal
    document.body.style.backgroundColor = "coral";
  }
}

A maneira típica e mais comum de muitos desenvolvedores lidarem com o redimensionamento da tela em JavaScript é vincular um ouvinte de evento de redimensionamento que verifica a largura do documento.

window.addEventListener("resize", function() {
  if (document.body.clientWidth >= 768) {
    document.body.style.backgroundColor = "coral";
  }
});

Você também pode ver a diferença no console.log, o evento de redimensionamento será acionado sempre que o navegador for redimensionado, enquanto o matchMedia será executado apenas uma vez após corresponder à consulta de mídia.

“Mesmo se olharmos além dos problemas de desempenho, o redimensionamento é restritivo no sentido de que não nos permite escrever consultas de mídia avançadas para itens como impressão e orientação. Portanto, embora imite o comportamento de “consulta de mídia” permitindo que correspondamos às larguras da janela de visualização, é incapaz de corresponder a qualquer outra coisa — e sabemos que as verdadeiras consultas de mídia são capazes de muito mais.”

Em conclusão, falamos sobre as necessidades de matchMedia e exploramos como ele nos permite definir condições de mídia e examinar o objeto mediaQueryList que nos permite executar nosso código uma vez quando ele corresponde à condição e de maneira persistente, definindo o método “onchange” da mediaQueryList.

Comparamos o método matchMedia com a vinculação de um ouvinte de evento de redimensionamento, o que nos permite examinar a maneira mais adequada de responder às alterações no tamanho da tela.

Eu dei exemplos ao longo do caminho que todos fazendo a mesma coisa (configurando o backgroundColor do corpo para coral) para mostrar como escrevê-lo em cada abordagem.

Se você tiver alguma dúvida sobre esta postagem ou sugestões, correções ou notas, sinta-se à vontade para comentar, enviar um e-mail ou DM. Obrigado por ler!