O design responsivo é uma arte técnica que requer mais do que apenas algumas consultas de mídia CSS. O método matchMedia permite que você ajuste dinamicamente o DOM usando JavaScript sem vincular a um resize event. 
O método window.matchMedia permite que você defina consultas de mídia JavaScript vinculando um evento manipulador quando o ponto de interrupção é acionado.
var mql=window.matchMedia ("screen and (min-width: 400px)") O método matchMedia aceita uma string. A string é um ponto de interrupção de consulta de mídia CSS. Neste exemplo, o ponto de interrupção se aplica quando a tela tem pelo menos 400 pixels de largura.
Isso funciona se o usuário estiver redimensionando um navegador de desktop ou girando uma tela de celular.
Web design responsivo (RWD) porque fornece uma maneira acessível de ter uma única base de código que visa uma ampla gama de dispositivos clientes.
O poder e a facilidade do RWD estão no uso de consultas de mídia CSS que definem regras personalizadas ajustando o layout.
Esforços para lidar com o lado do gerenciamento de conteúdo do web design responsivo levaram a um termo que alguns chamam de web design responsável.
Meu entendimento da prática é uma mistura de CSS consultas de mídia e JavaScript para criar um DOM e renderização mais otimizados com base nos critérios do navegador (tamanho típico).
Você pode usar a altura e a largura do ViewPort do navegador para acionar diferentes fluxos de trabalho e regras de renderização.
A maioria dos esforços dos desenvolvedores da web provavelmente ligam um manipulador de eventos ao evento de redimensionamento da janela.
Eu não era diferente.
Isso leva a problemas de desempenho porque o evento de redimensionamento dispara continuamente à medida que o usuário redimensiona a janela.
matchMedia resolve o problema de desempenho porque só dispara quando a condição da consulta de mídia é disparada. Isso acontece quando o ViewPort corresponde ou não à condição.
O manipulador matchMedia será acionado apenas uma vez, cada vez que a condição ViewPort for alterada em relação ao ponto de interrupção da consulta de mídia.
O método matchMedia retorna um novo objeto MediaQueryList. Este objeto possui um par de membros; addListener e removeListener.
Esses dois métodos vinculam e desvinculam um método de retorno de chamada que é executado quando o ViewPort do navegador cruza um limite definido por uma consulta de mídia.
A consulta de mídia (frequentemente abreviada como mql na documentação) é a mesma sintaxe usada em CSS.
O script de exemplo a seguir cria um MediaQueryList que executa um retorno de chamada quando o navegador ViewPort ultrapassa 400 pixels de largura, maior ou menor que.
window.matchMedia ("(min-width: 400px)"). addListener (function (e) {if (e.matches) {console.info ("a porta de visualização é de pelo menos 400 pixels de largura");} else {console.info ("a porta de visualização não tem pelo menos 400 pixels de largura");}});
O retorno de chamada addListener aceita uma única variável, usei’e’no exemplo.
A variável tem um par de propriedades; correspondências e mídia.
A propriedade correspondências é um booleano e pode ser verdadeiro ou falso, indicando se os critérios de consulta de mídia foram atendidos.
Para o exemplo acima, quando a largura é menor do que 400 pixels é falso. Quando ViewPort tem 400 pixels ou mais, isso é verdadeiro.
A propriedade de mídia é uma lista das consultas de mídia usadas para criar o MediaQueryListener. Neste exemplo, ele retorna”(min-width: 400px)”.
Existem duas vantagens principais que matchMedia tem sobre o monitoramento do evento de redimensionamento.
- Ele só dispara quando o os critérios de consulta de mídia correspondem às alterações de propriedade, não a todos os eventos de redimensionamento.
- Ele permite que seu JavaScript utilize as mesmas consultas de mídia e sintaxe que você está usando em seu CSS.
Isso deve tornar muito mais fácil manter as alterações de conteúdo em sincronia com as regras CSS usadas para estilizar o conteúdo.
matchMedia e o objeto MediaQueryList são suportados em todos os navegadores.
Resumo
matchMedia não é um recurso de plataforma de navegador muito conhecido. Ele pode fornecer melhorias dramáticas de desempenho se seu código estiver usando o evento de redimensionamento de janela para acionar ações responsivas e alterações de layout.
