有時候可以用matchMedia當resize的替代方案

matchMedia 的易用性

JavaScript 語法中的 matchMedia 瀏覽器相容性很高，IE10 以上都支援，所以基本上不用擔心什麼 polyfill。

而 matchMedia 的用法就像寫 CSS 的 media query 或 HTML 的 picture 一樣：

var xsMQ = window.matchMedia('(min-width: 480px)');
var mdMQ = window.matchMedia('(min-width: 992px)');

變數 xsMQ 和 mdMQ 是 boolean 值，因此，可以用判斷式來做想做的事。

matchMedia 與 change 事件結合

我們都知道 resize 有效能問題，需要用 debounce 或 throttle 解決，而如果把上述的 matchMedia 判斷式寫成 function，更可以用 change 事件做到 resize 可以做的事！

function mediaQueryStep(){
  if(xsMQ.matches){
    if(mdMQ.matches){
      // big size：do something...
    }else{
      // between big and small size：do something...
    }
  }else{
    // small size：do something...
  }
}
xsMQ.addEventListener('change', mediaQueryStep);
mdMQ.addEventListener('change', mediaQueryStep);

mediaQueryStep();

所以，在一些media query 沒有每改變 1 pixel 就會觸發某事件的情況下，matchMedia 也不失為一個好選擇。