JavaScript MediaQueryList API

MediaQueryList-objekt

MediaQueryList Objektet lagrar information från media-query.

MediaQueryList Objektet ärFönsterobjektegenskaper.

MediaQueryList Objektet kan åtkommas på följande sätt:

window.matchMedia() eller endast matchMedia():

Exempel

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

Prova själv

Se också:

window.matchMedia() metod

MediaQueryList-egenskap

egenskap Beskrivning
matches Boolsk värde. Om dokumentet matchar frågan, true, annars false.
media Strängvärde. Media-query (lista).

MediaQueryList-metod

Metod Beskrivning
addListener() Lägg till en ny lyssnarefunktion som körs varje gång utvärderingsresultatet för media-query ändras.
removeListener()

Ta bort tidigare tillagda lyssnarefunktioner från media-query-listan.

Om den specifika lyssnaren inte finns i listan, utför ingen åtgärd.

Media-query

matchMedia() Metoden för media-query kan vara CSS @media-regeln Någon media-characteristic, som min-height, min-width, orientation och liknande.

Exempel

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

Prova själv

Media-type

Värde Beskrivning
all Standard. Används för alla typer av medieenheter.
print Används för skrivare.
screen Används för datorskärmar, surfplattor, smartphones och liknande.
speech Används för att högläsningsskärm för att läsa sidan högt.

Media-characteristic

Värde Beskrivning
any-hover Finns det några tillgängliga inmatningsmekanismer som tillåter användaren att hålla muspekaren över elementet?
（Lägg till i Media Queries Level 4）.
any-pointer Finns det några tillgängliga inmatningsmekanismer, till exempel en pekpenna, och om ja, hur exakt är det?
（Lägg till i Media Queries Level 4）.
aspect-ratio Bredd- och höjdförhållandet för vyn.
color Antalet bitar för varje färgkomponent på utdataenheter.
color-gamut An ungefärlig färgomfattning som stöds av användaragent och utdataenheter
Är den huvudsakliga inmatningsmekanismen tillåten att använda muspekare att hänga över elementen?
Antalet färger som enheten kan visa. color-index
Antalet färger som enheten kan visa. grid
Är enheten ett raster eller en bitmapp. height
Viewportets höjd. hover
Är den huvudsakliga inmatningsmekanismen tillåten att använda muspekare att hänga över elementen?
（Lägg till i Media Queries Level 4） inverted-colors
（Lägg till i Media Queries Level 4）.
Använder webbläsaren eller underliggande operativsystem att omvända färger? light-level
Nuvarande ljusnivå för omgivningen (Lägg till i Media Queries Level 4). Maximal bredd-til-höjd-ratio för visningsområdet.
max-color Maximalt antal bitar för varje färgkomponent på utrustningen.
max-color-index Antalet färger som enheten kan visa.
max-height Maximal höjd på visningsområdet, till exempel webbläsarfönstret.
max-monochrome Maximalt antal bitar för varje 'färg' på monokrom (gråskala) enheter.
max-resolution Utrustningens maximala upplösning, använd dpi eller dpcm.
max-width Maximal bredd på visningsområdet, till exempel webbläsarfönstret.
min-aspect-ratio Minsta bredd-til-höjd-ratio för visningsområdet.
min-color Minsta antal bitar för varje färgkomponent på utrustningen.
min-color-index Antalet färger som enheten kan visa.
min-height Minsta höjd på visningsområdet, till exempel webbläsarfönstret.
min-monochrome Minsta antal bitar för varje 'färg' på monokrom (gråskala) enheter.
min-resolution Utrustningens minsta upplösning, använd dpi eller dpcm.
min-width Minsta bredd på visningsområdet, till exempel webbläsarfönstret.
monochrome Antalet bitar för varje 'färg' på monokrom (gråskala) enheter.
orientation Viewportets riktning (horisontell eller vertikal modus).
overflow-block Hur hanterar utrustningen innehåll som överskrider viewport längs den blockaxeln? (Lägg till i Media Queries Level 4).
overflow-inline Kan innehåll som överskrider viewport längs den inline-axeln rullas? (Lägg till i Media Queries Level 4).
pointer Är den huvudsakliga inmatningsmekanismen en pekpenna? Om ja, hur är dess noggrannhet?
（Lägg till i Media Queries Level 4）.
resolution Utrustningens upplösning, använd dpi eller dpcm.
scan Skanning av utrustningens process.
scripting Kan skript användas (t.ex. JavaScript)?) (lagts till i Media Queries Level 4).
update Hur snabbt kan utrustningen ändra innehållets utseende (lagts till i Media Queries Level 4).
width Viewport-bredd.