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
  }
}
