Venster matchMedia()
Voorbeeld 1
Is die skerm/kykpoort groter as 700 pieksels wyd:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
Definisie en gebruik
Die matchMedia()
metode gee 'n MediaQueryList terug met die resultate van die navraag.
Sien ook:
Medianavrae
Die medianavrae van die matchMedia()
metode kan enige van die mediakenmerke van die
CSS @media-reël wees, soos min-hoogte, min-breedte, oriëntasie, ens.
Voorbeelde
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Sintaksis
window.matchMedia(mediaQuery)
Grense
Parameter | Description |
mediaQuery | Required. A string representing a media query. |
Terugkeerwaarde
Tik | Beskrywing |
'n Voorwerp | 'n MediaQueryList-objek met die resultate van die medianavraag. |
Voorbeelde verduidelik
Die eerste voorbeeld op hierdie bladsy voer 'n medianavraag uit en vergelyk dit met die huidige vensterstatus.
Om responsiewe medianavraag uit te voer wanneer die vensterstatus verander, voeg 'n gebeurtenisluisteraar by die MediaQueryList-objek (Sien "Meer voorbeelde" hieronder):
Meer voorbeelde
As die kykpoort minder of gelyk aan 500 pieksels wyd is, stel agtergrondkleur op geel, anders op pienk:
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
Blaaierondersteuning
matchMedia()
word in alle moderne blaaiers ondersteun:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 11 | Yes | Yes | Yes | Yes |