Svelte MediaQuery 工具

Window.matchMedia 方法是一个用于检测媒体查询状态的 JavaScript 方法。它允许您在运行时检查是否符合特定的 CSS 媒体查询，并能够响应媒体查询的变化。这对于实现响应式设计非常有用，尤其是在需要根据视口大小或设备特性动态调整布局或功能时。 方法是一个用于检测媒体查询状态的 JavaScript 方法。它允许您在运行时检查是否符合特定的 CSS 媒体查询，并能够响应媒体查询的变化。这对于实现响应式设计非常有用，尤其是在需要根据视口大小或设备特性动态调整布局或功能时。

const mediaQueryList = window.matchMedia(mediaQueryString);

• mediaQueryString 是一个字符串，包含一个 CSS 媒体查询，例如 (max-width: 600px) 或 (orientation: portrait)。
• 返回值 mediaQueryList 是一个 MediaQueryList 对象。它包含了媒体查询的结果，并且可以监听媒体查询状态的变化。

mediaQuery + Store

在Svelte 中使用 Svelte Store 定义类似 React Hook 的效果

import { readable } from 'svelte/store';
 
export function mediaQuery(query: string) {
  return readable(false, (set) => {
    const isSupported = window && 'matchMedia' in window && typeof window.matchMedia === 'function';
 
    let mediaQuery: MediaQueryList | undefined;
 
    function update() {
      if (!isSupported) return;
 
      cleanup();
 
      mediaQuery = window.matchMedia(query);
      set(mediaQuery.matches);
 
      if ('addEventListener' in mediaQuery) {
        mediaQuery.addEventListener('change', update);
      } else {
        // @ts-expect-error deprecated API
        mediaQuery.addListener(update);
      }
    }
 
    function cleanup() {
      if (!mediaQuery) return;
      if ('removeEventListener' in mediaQuery) {
        mediaQuery.removeEventListener('change', update);
      } else {
        // eslint-disable-next-line @typescript-eslint/no-use-before-define
        (mediaQuery as MediaQueryList)?.removeListener(update);
      }
    }
 
    update();
 
    return cleanup;
  });
}

使用方式

<script lang="ts">
  import { mediaQuery } from '$lib/utils/mediaQuery';
 
  const isDesktop = mediaQuery('(min-width: 768px)');
 
  $: siblingCount = $isDesktop ? 1 : 0;
</script>