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 发生变化时会触发.

触发时机

需要注意它的触发机制

window.matchMedia('(min-width: 1027px)').addEventListener('change', e => {
  console.log('1', e.matches);
});

window.matchMedia('(min-width: 1026px)').addEventListener('change', e => {
  console.log('2', e.matches);
});

假设 viewport 从小变大（1000px 直接跳到 1100px），直觉我们可能会认为是先触及 1026px 然后才 1027px。

但不是，如果 viewport size 同时满足上面 2 个 media query，它会按照 addEventListener 的顺序触发。

当然，如果 viewport 是 1px 1px 增大，那自然是先触发 1026px 才到 1027px。