Como fazer - Consultas de mídia com JavaScript
Exemplo
Se a janela de visualização for menor ou igual a 700 pixels de largura, altere a cor do plano de fundo para amarelo. Se for maior que 700, mude para rosa
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
Usando consultas de mídia com JavaScript
As consultas de mídia foram introduzidas no CSS3 e são um dos principais ingredientes para o design responsivo da web. As consultas de mídia são usadas para determinar a largura e a altura de uma janela de visualização para que as páginas da Web tenham uma boa aparência em todos os dispositivos (computadores, laptops, tablets, telefones etc.).
O método window.matchMedia() retorna um objeto MediaQueryList que representa os resultados da string de consulta de mídia CSS especificada. O valor do método matchMedia() pode ser qualquer um dos recursos de mídia da regra CSS @media , como min-height, min-width, orientação etc.
Saiba mais sobre consultas de mídia em nosso Tutorial de consultas de mídia CSS
Saiba mais sobre design responsivo em nosso Tutorial de Web Design Responsivo
Saiba mais sobre o método window.matchMedia() em nossa Referência JavaScript.