Hvordan man bruger JavaScript til medieforespørgsler

Forrige side Klipbare HTML-elementer
Næste side Syntaxfremhæver

Brug JavaScript til medieforespørgsler

Medieforespørgsler blev introduceret i CSS3 og er en af de vigtigste elementer i responsiv webdesign. Medieforespørgsler bruges til at bestemme vinduesbredden og højden, så websider vises godt på alle enheder (stationære computere, bærbare computere, tablets, telefoner osv.).

window.matchMedia() metoden returnerer et MediaQueryList-objekt, der repræsenterer resultaterne af den specifikke CSS medieforespørgselssprogning.matchMedia() metoden kan have værdien CSS @media enhver medieegenskab i reglen, f.eks. min-height,min-width,orientering osv.

Eksempel

Hvis vinduesbredden er mindre end eller lig med 700 pixel, ændres baggrundsfarven til gul. Hvis bredden er større end 700, ændres den til pink:

function myFunction(x) {
  if (x.matches) { // Hvis medieforespørgsel matcher
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// Opret MediaQueryList-objekt
var x = window.matchMedia("(max-width: 700px)");
// Kald lytterfunktion ved kørsel
myFunction(x);
// Tilføj lytterfunktion ved ændring af tilstand
x.addEventListener("change", function() {
  myFunction(x);
);

Prøv det selv