Janela matchMedia()
Exemplo 1
A tela/porta de visualização tem mais de 700 pixels de largura:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
Definição e uso
O matchMedia()
método retorna um MediaQueryList com os resultados da consulta.
Veja também:
Consultas de mídia
As consultas de mídia do matchMedia()
método podem ser qualquer um dos recursos de
mídia da regra CSS @media , como altura mínima, largura mínima, orientação etc.
Exemplos
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Sintaxe
window.matchMedia(mediaQuery)
Parâmetros
Parameter | Description |
mediaQuery | Required. A string representing a media query. |
Valor de retorno
Modelo | Descrição |
Um objeto | Um objeto MediaQueryList com os resultados da consulta de mídia. |
Exemplos explicados
O primeiro exemplo nesta página executa uma consulta de mídia e a compara com o estado atual da janela.
Para executar uma consulta de mídia responsiva sempre que o estado da janela for alterado, adicione um ouvinte de evento ao objeto MediaQueryList (consulte "Mais exemplos" abaixo):
Mais exemplos
Se a janela de visualização for menor ou igual a 500 pixels de largura, defina a cor de fundo para amarelo, caso contrário, para rosa:
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
Suporte ao navegador
matchMedia()
é suportado em todos os navegadores modernos:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 11 | Yes | Yes | Yes | Yes |