API de MediaQueryList do JavaScript

Recomendação de curso:

Atributos de MediaQueryList Objeto MediaQueryList

Atributos de MediaQueryList O objeto armazena informações provenientes das consultas de mídia.éO objeto

Atributos de MediaQueryList O objeto pode ser acessado da seguinte forma:

window.matchMedia() ou apenas matchMedia():

Exemplo

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

Experimente pessoalmente

Veja também:

Método window.matchMedia()

Atributo MediaQueryList

Atributo Descrição
matches Valor booleano. Se o documento coincidir com a consulta, é true, caso contrário false.
media Valor de string. Consulta de mídia (lista).

Método MediaQueryList

Método Descrição
addListener() Adicione uma nova função de ouvinte, que será executada sempre que o resultado da avaliação da consulta de mídia mudar.
removeListener()

Remova o ouvinte previamente adicionado da lista de consultas de mídia.

Se o ouvinte especificado não estiver na lista, não execute nenhuma ação.

Consulta de mídia

matchMedia() A consulta de mídia do método pode ser Regra @media do CSS de qualquer característica de mídia, como min-height, min-width, orientação, etc.

Exemplo

matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);

Experimente pessoalmente

Tipo de mídia

Valor Descrição
all Padrão. Usado em todos os tipos de dispositivos de mídia.
print Usado em impressoras.
screen Usado em telas de computador, tablets, smartphones e outros.
speech Leitor de tela para 'ler em voz alta' a página.

Características de mídia

Valor Descrição
any-hover Há algum mecanismo de entrada disponível que permite que o usuário coloque o mouse sobre o elemento?
(Adicionado no Media Queries Level 4).
any-pointer Há algum mecanismo de entrada disponível, como um dispositivo de ponta, e se houver, qual é sua precisão?
(Adicionado no Media Queries Level 4).
aspect-ratio Razão de aspecto do viewport.
color Número de bits de cada componente de cor do dispositivo de saída.
color-gamut Alcance aproximado das cores suportadas pelo agente de usuário e o dispositivo de saída
(Adicionado no Media Queries Level 4).
color-index Número de cores que o dispositivo pode exibir.
grid O dispositivo é uma grade ou um bitmap?
height Altura da viewport.
hover O mecanismo de entrada principal permite que o usuário coloque o mouse sobre o elemento?
(Adicionado no Media Queries Level 4).
inverted-colors O navegador ou o sistema operacional de baixa camada inverte as cores?
(Adicionado no Media Queries Level 4).
light-level Nível atual do ambiente de luz (adicionado no Media Queries Level 4).
max-aspect-ratio Razão máxima de largura e altura da área de exibição.
max-color Número máximo de bits de cada componente de cor no dispositivo de saída.
max-color-index Número máximo de cores que o dispositivo pode exibir.
max-height Altura máxima da área de exibição, por exemplo, a janela do navegador.
max-monochrome Número máximo de bits de cada 'cor' em dispositivos monocromáticos (grayscale).
max-resolution Resolução máxima do dispositivo, usando dpi ou dpcm.
max-width Largura máxima da área de exibição, por exemplo, a janela do navegador.
min-aspect-ratio Razão mínima de largura e altura da área de exibição.
min-color Número mínimo de bits de cada componente de cor no dispositivo de saída.
min-color-index Número mínimo de cores que o dispositivo pode exibir.
min-height Altura mínima da área de exibição, por exemplo, a janela do navegador.
min-monochrome Número mínimo de bits de cada 'cor' em dispositivos monocromáticos (grayscale).
min-resolution Resolução mínima do dispositivo, usando dpi ou dpcm.
min-width Largura mínima da área de exibição, por exemplo, a janela do navegador.
monochrome Número de bits de cada 'cor' em dispositivos monocromáticos (grayscale).
orientation O direção da viewport (modo horizontal ou vertical).
overflow-block Como o dispositivo de saída lida com o conteúdo que transborda na axisa block (adicionado no Media Queries Level 4)?
overflow-inline Pode-se rolar o conteúdo que transborda na axisa inline (adicionado no Media Queries Level 4)?
pointer O mecanismo de entrada principal é um dispositivo de ponta? Se for, qual é sua precisão?
(Adicionado no Media Queries Level 4).
resolution Resolução do dispositivo de saída, usando dpi ou dpcm.
scan Processo de varredura do dispositivo de saída.
scripting Se é possível usar scripts (por exemplo, JavaScript)？(adicionado no Media Queries Level 4)
update Quão rápido o dispositivo de saída pode modificar a aparência do conteúdo (adicionado no Media Queries Level 4).
largura Largura da viewport.