`window.matchMedia`能夠讓你在 JS 中使用 CSS 的 [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) 對螢幕大小做判斷 方便你來做自適應式網頁的開發 且比監聽 `resize` 來的省資源 這個方法會回傳一個`MediaQueryList`物件 隨後你可以使用`addListener`加上監聽器 監控網頁 viewport 的大小變化 ```javascript $(document).ready(function () { let mq = window.matchMedia("(max-width: 768px)"); mq.addListener(sidebarOnMobile); sidebarOnMobile(mq); // run first function sidebarOnMobile(ev) { if (ev.matches) { /* mobile -> hide sidebar */ $sidebar.toggle("visible", false); } else { /* non-mobile -> show sidebar */ $sidebar.toggle("visible", true); } } }); ``` reference: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries)