JavaScript MediaQueryList API

MediaQueryList-object

MediaQueryList Object slaat informatie van mediaqueries op.

MediaQueryList Object isVensterobjectEigenschappen.

MediaQueryList Object kan worden benaderd op de volgende manier:

window.matchMedia() Of alleen met matchMedia():

Voorbeeld

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

Probeer het zelf uit

Zie ook:

window.matchMedia() methode

MediaQueryList-eigenschap

Eigenschap Beschrijving
matches Booleaanse waarde. Als het document overeenkomt met de query, dan true, anders false
media String-waarde. Media-query (lijst).

MediaQueryList-methode

Methode Beschrijving
addListener() Voeg een nieuwe luisteraarfunctie toe die wordt uitgevoerd wanneer de evaluatieresultaten van de media-query veranderen.
removeListener()

Verwijder eerder toegevoegde luisteraarfuncties uit de media-querylijst.

Geen actie uitvoeren als de opgegeven luisteraar niet in de lijst staat.

Media-query

matchMedia() De media-query van de methode kan zijn CSS @media rule Enige media-eigenschap, zoals min-height, min-width, orientation enz.

Voorbeeld

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

Probeer het zelf uit

Media-type

Waarde Beschrijving
all Standaard. Gebruikt voor alle media-type apparaten.
print Gebruikt voor printers.
screen Gebruikt voor computermonitoren, tablets, smartphones enz.
speech Gebruikt voor het hardop voorlezen van pagina's met schermlezers.

Media-eigenschap

Waarde Beschrijving
any-hover Is er een beschikbare invoermechanisme dat de gebruiker toestaat om de muis boven een element te houden?
(Toegevoegd in Media Queries Level 4).
any-pointer Is er een beschikbare invoermechanisme zoals een aanraakapparaat? Als ja, hoe accuraat is het?
(Toegevoegd in Media Queries Level 4).
aspect-ratio Beeldverhouding van het beeld.
color Aantal bits per kleurelement van het uitvoerapparaat.
color-gamut De ruwe kleurbereik ondersteund door gebruikersagenten en uitvoerapparaten
(Toegevoegd in Media Queries Level 4).
color-index Aantal kleuren dat het apparaat kan weergeven.
grid Is het apparaat een raster of een bitmaat?
height Hoogte van het viewport.
hover Is het primaire invoermechanisme toegestaan om de muis over elementen te laten zweven?
(Toegevoegd in Media Queries Level 4).
inverted-colors Reverseren van kleuren door de browser of de onderliggende besturingssysteem?
(Toegevoegd in Media Queries Level 4).
light-level Huidig niveau van omgevingslicht (toegevoegd in Media Queries Level 4).
Maximale aspectverhouding van het weergavegebied. Maximale aspectverhouding van het weergavegebied.
max-color Maximale aantal bits per kleurcomponent van het uitvoerapparaat.
max-color-index Maximale aantal kleuren dat het apparaat kan weergeven.
max-height Maximale hoogte van het weergavegebied, bijvoorbeeld het browservenster.
max-monochrome Maximale aantal bits per 'kleur' op monochroom (grijswaarden) apparaten.
max-resolution Maximale resolutie van het apparaat, gebruik dpi of dpcm.
max-width Maximale breedte van het weergavegebied, bijvoorbeeld het browservenster.
min-aspect-ratio Minimale aspectverhouding van het weergavegebied.
min-color Minimale aantal bits per kleurcomponent van het uitvoerapparaat.
min-color-index Minimale aantal kleuren dat het apparaat kan weergeven.
min-height Minimale hoogte van het weergavegebied, bijvoorbeeld het browservenster.
min-monochrome Minimale aantal bits per 'kleur' op monochroom (grijswaarden) apparaten.
min-resolution Minimale resolutie van het apparaat, gebruik dpi of dpcm.
min-width Minimale breedte van het weergavegebied, bijvoorbeeld het browservenster.
monochrome Aantal bits per 'kleur' op monochroom (grijswaarden) apparaten.
orientation Richting van het viewport (horizontaal of verticaal modus).
overflow-block Hoe behandelt het uitvoerapparaat de inhoud die over de blokas uitstroomt (toegevoegd in Media Queries Level 4)?
overflow-inline Kan de inhoud die over de inline-as uitstroomt, worden gescrolld (toegevoegd in Media Queries Level 4)?
pointer Is het primaire invoermechanisme een pointdevice? Als dat zo is, hoe accuraat is het?
(Toegevoegd in Media Queries Level 4).
resolution Resolutie van het uitvoerapparaat, gebruik dpi of dpcm.
scan Scannen van het uitvoerapparaat.
scripting Can scripts (such as JavaScript) be used? (added in Media Queries Level 4)
update How quickly the output device can modify the appearance of the content (added in Media Queries Level 4).
width Viewport width.