强大的JavaScript API——window.matchMedia

这个方法是做什么用的

window.matchMedia 是一个强大的 JavaScript API，用来执行 CSS 媒体查询，可以使用它来检查各种设备和显示特征，如屏幕尺寸、分辨率、颜色偏好等。想构建出对于用户更加友好的页面，跟这个方法必须得打上交道

好像从来没听说过

其实早就在CSS里写过不少了！

@media screen and (min-width: 636px) {
    ...
}

这就是所谓的媒体查询，通过检查显示设备的特征来改变CSS属性。通过JavaScript提供的window.matchMedia API也提供了这个功能，但是由于大部分媒体查询的目的都能通过CSS实现，这个API就显得很没存在感了。

if (window.matchMedia('screen and (min-width: 636px)').matches) {
	..
}

window.matchMedia返回一个MediaQueryList对象。简单来说，这个对象监听着这个媒体查询，上例用它的matches属性获取媒体查询的结果。更多用法可以查阅文档

那这个API有什么用

很多网站都提供了夜间模式的功能。那么如何根据系统是否开启夜间模式来自动切换页面到夜间模式。给用户更好的体验呢？这个时候这个API就很有用处了

   const theme = (() => {
      if (
         typeof localStorage !== 'undefined' &&
         localStorage.getItem('theme')
      ) {
         return localStorage.getItem('theme')
      }
      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
         return 'dark'
      }
      return 'light'
   })()

这里用到了window.matchMedia('(prefers-color-scheme: dark)').matches来进行媒体查询，从而实现获取系统是否开启了夜间模式。

除此之外，这个API还有许多实用的用途window.matchMedia('(orientation: landscape)')检查当前是否以横屏显示，利用这个可以提示用户“为了更好的体验请竖屏浏览”；window.matchMedia('(prefers-reduced-motion: reduce)')这个可以检测用户的设备是否开启了减少动画的选项，对于患有前庭运动障碍(Vestibular motion disorders)更加友好，当然还有更多用途等待着在实际应用中去发掘。