SvelteKit中基于屏幕宽度切换组件的替代实现方式

当然有其他几种可行的实现方式，下面是常用的几种方案：

方案1：媒体查询结合svelte:element #

直接复用CSS媒体查询逻辑，通过监听断点状态动态切换组件，逻辑更贴合前端响应式设计的常规思路：

<script>
  let isDesktop = window.matchMedia('(min-width: 769px)').matches;
  const mediaQuery = window.matchMedia('(min-width: 769px)');

  mediaQuery.addEventListener('change', (e) => {
    isDesktop = e.matches;
  });
</script>

<svelte:element this={isDesktop ? TableDisplay : CardsDisplay} />

方案2：使用ResizeObserver监听尺寸变化 #

如果需要监听特定容器而非整个窗口的尺寸，或者需要更精细的尺寸回调逻辑，ResizeObserver是更灵活的选择：

<script>
  import { onMount, onDestroy } from 'svelte';
  let isDesktop = false;
  let observer;

  onMount(() => {
    const updateSize = () => {
      isDesktop = window.innerWidth > 768;
    };
    // 初始化检查当前尺寸
    updateSize();
    // 创建观察者监听根元素尺寸变化
    observer = new ResizeObserver(updateSize);
    observer.observe(document.documentElement);

    // 组件销毁时清理观察者
    return () => observer?.disconnect();
  });
</script>

{#if isDesktop}
  <TableDisplay />
{:else}
  <CardsDisplay />
{/if}

方案3：纯CSS控制（无JS依赖） #

如果组件仅需简单的显示/隐藏切换，完全可以用CSS媒体查询实现，无需编写JavaScript代码，性能更优：

<div class="component-wrapper">
  <TableDisplay class="desktop-component" />
  <CardsDisplay class="mobile-component" />
</div>

<style>
  .desktop-component { display: block; }
  .mobile-component { display: none; }

  @media (max-width: 768px) {
    .desktop-component { display: none; }
    .mobile-component { display: block; }
  }
</style>

方案4：优化原始方案的反应式写法 #

你的原始代码可以通过Svelte的反应式语句优化，让逻辑更清晰可读：

<script>
  let innerWidth;
  // 当innerWidth变化时自动更新isDesktop状态
  $: isDesktop = innerWidth > 768;
</script>

<svelte:window bind:innerWidth />

{#if isDesktop}
  <TableDisplay />
{:else}
  <CardsDisplay />
{/if}

内容的提问来源于stack exchange，提问作者askwer