Método Window matchMedia()

Objeto Janela do JavaScript

matchMedia()O método retorna uma nova instância de MediaQueryList, que representa o resultado da análise da string de consulta de mídia especificada.

O valor do método matchMedia() pode serRegra @media do CSSQualquer função de mídia, por exemplo, min-altura, min-largura, orientação, etc.

Sintaxe:

window.matchMedia(mediaQueryString)

if (window.matchMedia("(min-largura:　5(00px)).matches) {
　　　/*　A viewport viewport é no mínimo500 pixels de largura　*/
} else {
　　　/*　A largura da viewport viewport é menor que500 pixels　*/
}

Compatibilidade do navegador

Os números na tabela especificam a primeira versão do navegador que suporta completamente o método matchMedia():

Valor do parâmetro

Detalhes técnicos

Mais Exemplos

Se a largura da viewport for menor ou igual a600 pixels, a cor de fundo será coral. Se maior que600, ele se tornará verde claro:

var size = window.matchMedia("(max-largura:　600px)")
myFunc(size)　//　Chamar função de ouvinte em tempo de execução
size.addListener(myFunc)　//　Adicionar função de ouvinte ao alterar o estado
function myFunc(size) {
　　if (size.matches) {
　document.body.style.backgroundColor = "coral";
　　} else {
　document.body.style.backgroundColor = "lightgreen";
　　}
}

Referências Relacionadas

Tutoriais CSS:Consultas de Mídia CSS

Objeto Janela do JavaScript