Window matchMedia() Method

Paglilingkuran at Paggamit

matchMedia() Ang method ay nagbibigay ng MediaQueryList na may mga resulta ng query.

Mga ibang basahin:

MediaQueryList object

Media Query

Ang media query method na matchMedia() ay maaaring maging anumang media attribute ng CSS @media rule, tulad ng min-height, min-width, orientation, atbp.

Mga Halimbawa

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

Mga Halimbawa

Halimbawa 1

Ang screen/viewport ay mas malaki sa 700 pixel na luwang?

if (window.matchMedia("(max-width: 700px)").matches) {
  // Ang lapad ng viewport ay mas maliit o katumbas ng 700 pixel
}
  // Ang lapad ng viewport ay mas malaki sa 700 pixel
}

subukahin nang personal

Paliwanag ng Halimbawa

Ang halimbawa na ito ay nagpatakbo ng media query at nagkumpara sa kasalukuyang estado ng window.

Para mapatakbo ang responsive media query kapag nagbabago ang estado ng window, magdagdag ng event listener sa MediaQueryList object (tingnan ang ibang halimbawa sa ibaba):

Halimbawa 2

Kung ang viewport ay mas maliit o katumbas ng 500 pixel na luwang, ilagay ang kulay ng background bilang dilaw, kung hindi ay pink:

// lumikha ng match function
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // lumikha ng MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)");
// Tawagan ang match function sa panahon ng pagpatakbo:
myFunction(mmObj);
// Magdagdag ng match function bilang tagapagmasid ng pagbabago ng estado:
mmObj.addListener(myFunction);

subukahin nang personal

gramatika

window.matchMedia("mediaQuery)

parametro

parametro Description
mediaQuery Mandatory. Naglalaman ng string na naglalayong media query.

Return Value

Type Description
Obhekyo MediaQueryList Obhekyo na may resulta ng media query.

Browser Support

Supported by all browsers matchMedia():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 11 Support Support Support Support