Método matchMedia() da Window

Definição e uso

matchMedia() O método retorna um MediaQueryList com o resultado da consulta.

Veja também:

Objeto MediaQueryList

Consultas de mídia

A consulta de mídia do método matchMedia() pode ser qualquer característica de media do CSS @media, como min-height, min-width, orientation, etc.

Exemplo

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

Exemplo

Exemplo 1

A largura da tela/viewport é maior que 700 pixels?

if (window.matchMedia("(max-width: 700px)").matches) {
  // Largura da viewport menor ou igual a 700 pixels
}
  // Largura da viewport maior que 700 pixels
}

Experimente pessoalmente

Explicação do exemplo

Este exemplo executa a consulta de mídia e compara com o estado atual da janela.

Para executar consultas de mídia responsivas ao alterar o estado da janela, adicione um ouvinte de eventos ao objeto MediaQueryList (veja os exemplos abaixo):

Exemplo 2

Se a largura da viewport for menor ou igual a 500 pixels, configure a cor de fundo como amarela; caso contrário, configure como pink:

// Criar função match
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // Criar objeto MediaQueryList
const mmObj = window.matchMedia("(max-width: 700px)");
// Chamar função match em tempo de execução:
myFunction(mmObj);
// Adicionar função match como ouvinte de mudanças de estado:
mmObj.addListener(myFunction);

Experimente pessoalmente

sintaxe

window.matchMedia("mediaQuery)

parâmetros

parâmetros Descrição
mediaQuery Obrigatório. Representa a string da consulta de mídia.

Retorno

Tipo Descrição
Objeto Objeto MediaQueryList com resultados de media query.

Suporte do navegador

Todos os navegadores suportam matchMedia():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 11 Suporte Suporte Suporte Suporte