MediaQuery
Take a media query (or a function that returns one if you want reactivity) as input and you can check if it currently matches doing `instance.match`
Demo
The result of the media query (min-width: 640px) is
Usage
The simplest way of using this utility is just by passing a string with a valid media query.
<script>
import { MediaQuery } from "runed";
const screen = new MediaQuery("(min-width: 640px)");
</script>
{#if screen.matches}
Your screen is less than 640px
{:else}
Your screen is more than 640px
{/if}
You can also pass a getter that returns a string.
<script lang="ts">
import { MediaQuery } from "runed";
let media = $state("(min-width: 640px)");
const query = new MediaQuery(() => media);
</script>
Media query {media} is currently {screen.matches}
<select bind:value={media}>
<option value="(min-width: 640px)">640px</option>
<option value="(min-width: 320px)">320px</option>
</select>