有時候可以用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 也不失為一個好選擇。
