JavaScript MediaQueryList API

MediaQueryList objekt

MediaQueryList Objektet gemmer information fra medieforespørgslen.

MediaQueryList Objektet erVinduesobjektegenskaber.

MediaQueryList Objektet kan tilgås på følgende måde:

window.matchMedia() eller kun brug matchMedia():

Eksempel

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

Prøv det selv

Se også:

window.matchMedia() metode

MediaQueryList egenskab

Egenskab Beskrivelse
matches Boolsk værdi. Hvis dokumentet matcher forespørgslen, er det true, ellers false.
media Strengværdi. Medieforespørgsel (liste).

MediaQueryList-metode

Metode Beskrivelse
addListener() Tilføj en ny lytterfunktion, der udføres hver gang evalueringen af medieforespørgslen ændres.
removeListener()

Fjern tidligere tilføjet lytterfunktion fra medieforespørgselslisten.

Hvis den angivne lytter ikke er i listen, udføres ingen handling.

Medieforespørgsel

matchMedia() Medieforespørgsel kan være CSS @media regel Enhver medieegenskab, såsom min-height, min-width, orientering osv.

Eksempel

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

Prøv det selv

Medietype

Værdi Beskrivelse
all Standard. Bruges til alle medietypeenheder.
print Bruges til printere.
screen Bruges til computermonitorer, tablets, smartphones osv.
speech Bruges til at læse siden højt for skærmlæsere.

Medieegenskab

Værdi Beskrivelse
any-hover Er der nogen tilgængelig inputmekanisme, der tillader brugeren at holde musen over elementet?
(Added in Media Queries Level 4).
any-pointer Er der nogen tilgængelig inputmekanisme, som er en pegeenhed, og hvis ja, hvordan er dens nøjagtighed?
(Added in Media Queries Level 4).
aspect-ratio Visnets bredde-højdeforhold.
color Antal bits for hver farvekomponent på udstyret.
color-gamut Brugergenereret og udstyrsstøttet næsten farverækkevidde
Does the main input mechanism allow the user to hover over elements?
Number of bits for each 'color' on monochrome (grayscale) devices. color-index
Number of colors that the device can display. grid
Is the device a grid or bitmap. height
Viewport height. hover
Does the main input mechanism allow the user to hover over elements?
(Added in Media Queries Level 4). inverted-colors
(Added in Media Queries Level 4).
Does the browser or underlying operating system invert colors? light-level
Current ambient light level (added in Media Queries Level 4). Maximum aspect ratio of the display area.
max-color Maximum number of bits for each color component on the output device.
max-color-index Maximum number of colors that the device can display.
max-height Maximum height of the display area, for example, the browser window.
max-monochrome Maximum number of bits for each 'color' on monochrome (grayscale) devices.
max-resolution Maximum resolution of the device, using dpi or dpcm.
max-width Maximum width of the display area, for example, the browser window.
min-aspect-ratio Minimum aspect ratio of the display area.
min-color Minimum number of bits for each color component on the output device.
min-color-index Minimum number of colors that the device can display.
min-height Minimum height of the display area, for example, the browser window.
min-monochrome Minimum number of bits for each 'color' on monochrome (grayscale) devices.
min-resolution Minimum resolution of the device, using dpi or dpcm.
min-width Minimum width of the display area, for example, the browser window.
monochrome Number of bits for each 'color' on monochrome (grayscale) devices.
orientation Viewport orientation (landscape or portrait mode).
overflow-block How does the output device handle content that overflows along the block axis (added in Media Queries Level 4)?
overflow-inline Can content that overflows along the inline axis be scrolled (added in Media Queries Level 4)?
pointer Is the main input mechanism a pointing device? If so, how accurate is it?
(Added in Media Queries Level 4).
resolution Resolution of the output device, using dpi or dpcm.
scan Output scanning process of the output device.
scripting Kan script bruges (f.eks. JavaScript)？（tilføjet i Media Queries Level 4).
update Hvor hurtigt kan udstyret ændre indholdets udseende (tilføjet i Media Queries Level 4).
width Visningsbredde.