How TO - Mediaquery's met JavaScript
Voorbeeld
Als het kijkvenster kleiner is dan of gelijk is aan 700 pixels breed, wijzigt u de achtergrondkleur in geel. Als het groter is dan 700, verander het dan in roze
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
Mediaquery's gebruiken met JavaScript
Mediaquery's zijn geïntroduceerd in CSS3 en zijn een van de belangrijkste ingrediënten voor responsive webdesign. Mediaquery's worden gebruikt om de breedte en hoogte van een viewport te bepalen om webpagina's er goed uit te laten zien op alle apparaten (desktops, laptops, tablets, telefoons, enz.).
De methode window.matchMedia() retourneert een MediaQueryList-object dat de resultaten vertegenwoordigt van de opgegeven CSS-mediaquerytekenreeks. De waarde van de matchMedia()-methode kan elk van de mediafuncties van de CSS @media-regel zijn, zoals min-height, min-width, oriëntatie, enz.
Lees meer over mediaquery's in onze CSS Media Queries Tutorial
Leer meer over responsive design in onze Responsive Web Design Tutorial
Lees meer over de methode window.matchMedia() in onze JavaScript-referentie.