# Media Query

the DOM provides features that can test the results of a media query programmatically, via the MediaQueryList interface and its methods and properties. Once you've created a MediaQueryList object, you can check the result of the query or receive notifications when the result changes.

# State

import { useMedia } from 'vue-use-web';

const isLg = useMedia('(min-width: 1024px)');

useMedia only returns a single value which is a boolean.

State Type Description
matches Ref<boolean> If the query matches or not.

# Example

<template>
  <h1>Is Desktop: {{ isLg }}</h1>
</template>

<script>
import { useMedia } from 'vue-use-web';

export default {
  setup() {
    const isLg = useMedia('(min-width: 1024px)');

    return { isLg };
  }
};
</script>

# Demo

TODO: Add cool live example!