# Statethe 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.
import { useMedia } from 'vue-use-web';
const isLg = useMedia('(min-width: 1024px)');
useMedia
only returns a single value which is a boolean.
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!
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4