xelaok/svelte-media-query

CSS media queries in Svelte

svelte-media-query (npm, demo)

CSS media queries in svelte.

Installation

npm i svelte-media-query

Usage

<script>
    import MediaQuery from "svelte-media-query";
</script>

<MediaQuery query="(min-width: 1281px)" let:matches>
    {#if matches}
    <div class="root default">
        default
    </div>
    {/if}
</MediaQuery>

<MediaQuery query="(min-width: 481px) and (max-width: 1280px)" let:matches>
    {#if matches}
    <div class="root tablet">
        tablet
    </div>
    {/if}
</MediaQuery>

<MediaQuery query="(max-width: 480px)" let:matches>
    {#if matches}
    <div class="root mobile">
        mobile
    </div>
    {/if}
</MediaQuery>