Como usar consultas de mídia com JavaScript

Uso de consultas de mídia com JavaScript

As consultas de mídia foram introduzidas no CSS3 e são um dos elementos principais do design web responsivo. As consultas de mídia são usadas para determinar a largura e a altura da viewport, para que a página web seja exibida bem em todos os dispositivos (computadores de mesa, laptops, tablets, celulares, etc.).

window.matchMedia() O método matchMedia() retorna um objeto MediaQueryList, que representa o resultado da string de consulta de mídia CSS especificada.matchMedia() O valor do método pode ser CSS @media qualquer característica de mídia de regra, por exemplo min-height、min-width、orientação etc.

Exemplo

Se a largura da viewport for menor ou igual a 700 pixels, altere a cor de fundo para amarelo. Se a largura for maior que 700, altere para pink:

function myFunction(x) {
  if (x.matches) { // Se a consulta de mídia coincidir
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// Criar objeto MediaQueryList
var x = window.matchMedia("(max-width: 700px)");
// Chamar função de ouvinte no tempo de execução
myFunction(x);
// Adicionar função de ouvinte de evento quando o estado mudar
x.addEventListener("change", function() {
  myFunction(x);
);

Experimente pessoalmente

Páginas relacionadas

Tutorial:Consulta de mídia CSS

Tutorial:Design de página web responsiva

Manual de referência:Método window.matchMedia() do JavaScript