[JS]判斷畫面寬度的matchMedia方法

IE10後matchMedia可依設定判斷畫面寬度。

另外再搭配原本CSS的@media,讓響應式網頁實作時有更多彈性。

HTML:

<body>
  <div>matchMedia</div>
</body>

CSS:

div {
  background-color: blue;
}
	
@media (max-width: 768px) {
  div {
    background-color: red;
  }
}

Javascript:

var mm = window.matchMedia("(max-width: 768px)");
mm.addListener(resizeWidth);
resizeWidth(mm);

function resizeWidth(pMatchMedia){
  if (pMatchMedia.matches) {
    //小於768時執行的js
  }else {
    //大於768時執行的js
  }
}