BOM – Window.matchMedia

参考

Youtube – Detecting Screen Size and OS Dark Mode with matchMedia() - JavaScript Tutorial

 

介绍

CSS 有 Media Query, JS 呢? 

没错就是用 Window.matchMedia 方法.

 

使用

const mediaQuery = '(min-width: 800px)';
const mediaQueryList = window.matchMedia(mediaQuery);
console.log(mediaQueryList.matches); // true or false

mediaQuery 和 CSS 写法一样.

调用 window.matchMedia 返回一个 mediaQueryList 对象.

mediaQueryList.matches 表示是否匹配.

watch change

早年好像是没有 watch 的, 要自己监听 resize 然后再 matchMedia

但现在有了

mediaQueryList.addEventListener('change', event => {
  console.log(event.matches); // 或者用 mediaQueryList.matches 也是可以的
});

当 matches 发生变化时会触发.