API MediaQueryList JavaScript

Obiekt MediaQueryList

Atrybuty MediaQueryList Obiekt przechowuje informacje z zapytań mediów.

Atrybuty MediaQueryList ObiektObiektObiekt

Atrybuty MediaQueryList Obiekt dostępny w następujący sposób:

window.matchMedia() lub tylko matchMedia():

Przykład

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

Spróbuj sam

Zobacz również:

Metoda window.matchMedia()

Atrybut MediaQueryList

Atrybut Opis
matches Wartość logiczna. Jeśli dokument pasuje do zapytania, to true, w przeciwnym razie false.
media Wartość ciągła. Zapytania mediów (lista).

Metoda MediaQueryList

Metoda Opis
addListener() Dodanie nowej funkcji słuchacza, która jest wykonywana za każdym razem, gdy wynik oceny zapytania mediów zmienia się.
removeListener()

Usunięcie wcześniejszo dodanego funkcji słuchacza z listy zapytań mediów.

Jeśli określony słuchacz nie znajduje się na liście, nie wykonuje się żadnej operacji.

Zapytanie mediów

matchMedia() Metoda zapytania mediów może być Reguła @media CSS Dowolnych atrybutów mediów, takich jak min-height, min-width, orientacja itp.

Przykład

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

Spróbuj sam

Typ mediów

Wartość Opis
all Domyślny. Używany dla wszystkich typów urządzeń mediów.
print Dla drukarki.
screen Dla komputerów, tabletów, smartfonów i innych.
speech Ekran czytania ekranowego do głośnego czytania strony.

Atrybuty mediów

Wartość Opis
any-hover Czy istnieje jakieś dostępne mechanizm wejściowy, który pozwala użytkownikowi umieszczać kursor myszy nad elementem?
(Dodane w Media Queries Level 4).
any-pointer Czy istnieje jakieś dostępne mechanizm wejściowy, takie jak urządzenie wskazujące, i jeśli tak, jak dokładne jest ono?
(Dodane w Media Queries Level 4).
aspect-ratio Proporcja szerokości do wysokości widoku.
color Liczba bitów na każdą komponentę koloru urządzenia wyjściowego.
color-gamut Przybliżony zakres kolorów wspieranych przez agenta użytkownika i urządzenie wyjściowe
Czy główny mechanizm wejścia pozwala użytkownikowi podtrzymywać mysz nad elementem?
Liczba kolorów, które urządzenie może wyświetlić. color-index
Liczba kolorów, które urządzenie może wyświetlić. grid
Czy urządzenie jest siatką czy bitmapą? height
Wysokość viewportu. hover
Czy główny mechanizm wejścia pozwala użytkownikowi podtrzymywać mysz nad elementem?
(Dodane w Media Queries Level 4) inverted-colors
(Dodane w Media Queries Level 4).
Czy przeglądarka lub system operacyjny podstawowy odwraca kolory? light-level
Maksymalny poziom światła w środowisku (Dodane w Media Queries Level 4). Maksymalny współczynnik szerokości do wysokości obszaru wyświetlania.
max-color Maksymalna liczba bitów dla każdej komponenty koloru na urządzeniu wyjściowym.
max-color-index Maksymalna liczba kolorów, które urządzenie może wyświetlić.
max-height Maksymalna wysokość obszaru wyświetlania, na przykład okno przeglądarki.
max-monochrome Maksymalna liczba bitów dla każdej "koloru" na urządzeniu monochromatycznym (grayscale).
max-resolution Maksymalna rozdzielczość urządzenia, używana dpi lub dpcm.
max-width Maksymalna szerokość obszaru wyświetlania, na przykład okno przeglądarki.
min-aspect-ratio Minimalny współczynnik szerokości do wysokości obszaru wyświetlania.
min-color Minimalna liczba bitów dla każdej komponenty koloru na urządzeniu wyjściowym.
min-color-index Minimalna liczba kolorów, które urządzenie może wyświetlić.
min-height Minimalna wysokość obszaru wyświetlania, na przykład okno przeglądarki.
min-monochrome Minimalna liczba bitów dla każdej "koloru" na urządzeniu monochromatycznym (grayscale).
min-resolution Minimalna rozdzielczość urządzenia, używana dpi lub dpcm.
min-width Minimalna szerokość obszaru wyświetlania, na przykład okno przeglądarki.
monochrome Liczba bitów dla każdej "koloru" na urządzeniu monochromatycznym (grayscale).
orientation Kierunek viewportu (tryb poziomy lub pionowy).
overflow-block Jak urządzenie wyjściowe obsługuje zawartość wykraczającą poza obszar widoczny wzdłuż osi blokowej (Dodane w Media Queries Level 4)?
overflow-inline Czy można przewijać zawartość wykraczającą poza obszar widoczny wzdłuż osi wewnętrznej (Dodane w Media Queries Level 4)?
pointer Czy głównym mechanizmem wejścia jest urządzenie wskazujące? Jeśli tak, jak duża jest jego dokładność?
(Dodane w Media Queries Level 4).
resolution Rozdzielczość urządzenia wyjściowego, używana dpi lub dpcm.
scan Proces skanowania urządzenia wyjściowego.
scripting Czy można używać skryptów (np. JavaScript)? (dodane w Media Queries Level 4).
update Jak szybko urządzenie może zmienić wygląd treści (dodane w Media Queries Level 4).
szerokość Szerokość viewport.