Question

I use this to get the current window size in my sveltekit app, and change the component being displayed when the width is small:

<script>
let size;
</script>
<svelte:window bind:innerwidth{size}/>
<div>
    {#if size > 768}
        <TableDisplay/>
    {:else}
        </CardsDisplay/>
    {/if}
</div>

Is there any other way to do this?

Answer 1

Media queries would be an option.

You would define classes that show/hide an element depending on viewport width. This requires a wrapper element that the style can be applied to, or you define the rules as global, pass the class into the components and add them there.

E.g.

<div class="show-large">
    <TableDisplay/>
</div>
<div class="show-small">
    <CardsDisplay/>
</div>

<style>
  /* `contents` prevents wrapper from affecting layout */
  .show-small { display: none; }
  .show-large { display: contents; }

  @media (max-width: 768px) {
    .show-small { display: contents; }
    .show-large { display: none; }
  }
</style>

REPL Example

Note that this does behave differently from the {#if} approach: With media queries, all elements and components are created and inserted into the document, just not always shown, while {#if} does not create anything if the condition is not met.

友情链接