Hoe media queries gebruiken met JavaScript

Vorige pagina Draagbare HTML-elementen
Next page Syntax highlighter

Media queries gebruiken met JavaScript

Media queries werden geïntroduceerd in CSS3 en zijn een van de belangrijkste elementen van responsive webdesign. Media queries worden gebruikt om de breedte en hoogte van het viewport te bepalen, zodat de website goed zichtbaar is op alle apparaten (desktop, laptop, tablet, smartphone, enz.).

window.matchMedia() De methode retourneert een MediaQueryList object dat de resultaten van de gespecificeerde CSS media query string vertegenwoordigt.matchMedia() De waarde van de methode kan zijn CSS @media elke media feature van de regel, bijvoorbeeld min-height,min-width,orientatie enz.

Voorbeeld

Als de breedte van het viewport kleiner of gelijk is aan 700 pixels, wijzig dan de achtergrondkleur in geel. Als de breedte groter is dan 700, wijzig dan de kleur in roze:

function myFunction(x) {
  if (x.matches) { // Als de media query overeenkomt
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// Maak MediaQueryList object aan
var x = window.matchMedia("(max-width: 700px)");
// Roep luisterfunctie aan bij runtime
myFunction(x);
// Voeg luisterfunctie toe bij statusverandering
x.addEventListener("change", function() {
  myFunction(x);
);

Probeer het zelf