API di MediaQueryList JavaScript

Oggetto MediaQueryList

Proprietà di MediaQueryList memorizza le informazioni provenienti dalle query di media.

Proprietà di MediaQueryList L'oggettoèL'oggetto

Proprietà di MediaQueryList L'oggetto può essere acceduto tramite il seguente modo:

window.matchMedia() o semplicemente matchMedia():

Esempio

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

Prova personalmente

Vedere anche:

Metodo window.matchMedia()

Proprietà di MediaQueryList

Proprietà Descrizione
matches Valore booleano. Se il documento corrisponde alla query, allora true, altrimenti false.
media Valore di stringa. Query di media (elenco).

Metodo di MediaQueryList

Metodo Descrizione
addListener() Aggiungi una nuova funzione di ascoltatore, che viene eseguita ogni volta che il risultato dell'evaluazione della query di media cambia.
removeListener()

Rimuovi l'ascoltatore precedentemente aggiunto dalla lista delle funzioni di ascoltatore di query di media.

Se l'ascoltatore specificato non è nella lista, non viene eseguita nessuna operazione.

Query di media

matchMedia() La query di media può essere Regola @media CSS di qualsiasi caratteristica di media, come min-height, min-width, orientation, ecc.

Esempio

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

Prova personalmente

Tipo di media

Valore Descrizione
all Predefinito. Utilizzato per tutti i tipi di dispositivi di media.
print Utilizzato per stampanti.
screen Utilizzato per schermi di computer, tablet, smartphone e altro.
speech Screen reader utilizzato per leggere a voce alta la pagina.

Caratteristiche dei media

Valore Descrizione
any-hover Esiste un qualsiasi meccanismo di input disponibile che permetta all'utente di hoverare sull'elemento?
(Aggiunto nel Media Queries Level 4).
any-pointer Esiste un qualsiasi meccanismo di input disponibile, come un dispositivo di puntamento, e se sì, quanto è accurato?
(Aggiunto nel Media Queries Level 4).
aspect-ratio Il rapporto larghezza-altezza del punto di vista.
color Il numero di bit per ciascun componente di colore del dispositivo di output.
color-gamut L'intervallo di colori supportato dagli agenti utente e dagli dispositivi di output
(aggiunto nel Media Queries Level 4)
color-index Numero di colori che il dispositivo può visualizzare.
grid Il dispositivo è a griglia o bitmap.
height Altezza del viewport.
hover Il meccanismo di input principale permette agli utenti di far hover sugli elementi? (aggiunto nel Media Queries Level 4).
(aggiunto nel Media Queries Level 4)
inverted-colors Il browser o il sistema operativo di base trasforma i colori? (aggiunto nel Media Queries Level 4).
(Aggiunto nel Media Queries Level 4).
light-level Livello di luce attuale dell'ambiente (aggiunto nel Media Queries Level 4).
max-aspect-ratio Rapporto massimo di larghezza e altezza dell'area di visualizzazione.
max-color Numero massimo di bit per ogni componente di colore dell'output device.
max-color-index Numero massimo di colori che il dispositivo può visualizzare.
max-height Altezza massima dell'area di visualizzazione, ad esempio la finestra del browser.
max-monochrome Numero massimo di bit per ogni 'colore' sui dispositivi monocromatici (grigio).
max-resolution Risoluzione massima del dispositivo, utilizzata dpi o dpcm.
max-width Larghezza massima dell'area di visualizzazione, ad esempio la finestra del browser.
min-aspect-ratio Rapporto minimo di larghezza e altezza dell'area di visualizzazione.
min-color Numero minimo di bit per ogni componente di colore dell'output device.
min-color-index Numero minimo di colori che il dispositivo può visualizzare.
min-height Altezza minima dell'area di visualizzazione, ad esempio la finestra del browser.
min-monochrome Numero minimo di bit per ogni 'colore' sui dispositivi monocromatici (grigio).
min-resolution Risoluzione minima del dispositivo, utilizzata dpi o dpcm.
min-width Larghezza minima dell'area di visualizzazione, ad esempio la finestra del browser.
monochrome Numero di bit per ogni 'colore' sui dispositivi monocromatici (grigio).
orientation Direzione del viewport (modalità orizzontale o verticale).
overflow-block Come gestisce l'output device il contenuto che supera il viewport lungo l'asse del blocco? (Aggiunto nel Media Queries Level 4).
overflow-inline È possibile far scorrere il contenuto che supera il viewport lungo l'asse inline? (Aggiunto nel Media Queries Level 4).
pointer Il meccanismo di input principale è un dispositivo di puntamento? Se sì, quanto è accurato?
(Aggiunto nel Media Queries Level 4).
resolution Risoluzione dell'output device, utilizzata dpi o dpcm.
scan Processo di scansione dell'output device.
scripting È possibile utilizzare script (ad esempio JavaScript)？(aggiunto nel Media Queries Level 4).
aggiorna Quanto velocemente può essere modificato l'aspetto del contenuto dell'output device (aggiunto nel Media Queries Level 4).
larghezza Larghezza della viewport.