Skip to content

xelaok/svelte-media-query

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

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>

About

CSS media queries in Svelte

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages