Hur man använder JavaScript för mediaquery

Föregående sida Kan dras HTML-element
Nästa sida Syntaxfärgare

Använda JavaScript för mediaquery

Mediaqueryn introducerades i CSS3 och är en av de grundläggande elementen i responsiv webbdesign. Mediaqueryn används för att bestämma viewportens bredd och höjd för att göra att webbsidan visas bra på alla enheter (datorer, bärbara datorer, surfplattor, telefoner osv.).

window.matchMedia() funktionen returnerar ett MediaQueryList-objekt som representerar resultatet av den specifika CSS-mediaquerysträngen.matchMedia() funktionen kan ha värdena CSS @media vilken som helst mediafunktion enligt regeln, till exempel min-height、min-width、orientation osv.

Exempel

Om viewportens bredd är mindre än eller lika med 700 pixlar, ändra bakgrundsfärgen till gul. Om bredden är större än 700, ändra den till rosa:

function myFunction(x) {
  if (x.matches) { // Om mediaqueryn matchar
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// Skapa MediaQueryList-objekt
var x = window.matchMedia("(max-width: 700px)");
// Anropa lyssnarefunktionen vid körning
myFunction(x);
// Lägg till lyssnarefunktion vid tillståndändring
x.addEventListener("change", function() {
  myFunction(x);
);

Prova själv