1---
2category: Browser
3---
4 
5# useMediaQuery
6 
7Reactive [Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries). Once you've created a MediaQueryList object, you can check the result of the query or receive notifications when the result changes.
8 
9## Usage
10 
11```ts
12import { useMediaQuery } from '@vueuse/core'
13 
14const isLargeScreen = useMediaQuery('(min-width: 1024px)')
15const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)')
16```
17 
18#### Server Side Rendering and Nuxt
19 
20If you are using `useMediaQuery` with SSR enabled, then you need to specify which screen size you would like to render on the server and before hydration to avoid an hydration mismatch
21 
22```ts
23import { useMediaQuery } from '@vueuse/core'
24 
25const isLarge = useMediaQuery('(min-width: 1024px)', {
26  ssrWidth: 768 // Will enable SSR mode and render like if the screen was 768px wide
27})
28 
29console.log(isLarge.value) // always false because ssrWidth of 768px is smaller than 1024px
30onMounted(() => {
31  console.log(isLarge.value) // false if screen is smaller than 1024px, true if larger than 1024px
32})
33```
34 
35Alternatively you can set this up globally for your app using [`provideSSRWidth`](../useSSRWidth/index.md)
36 
37## Type Declarations
38 
39```ts
40/**
41 * Reactive Media Query.
42 *
43 * @see https://vueuse.org/useMediaQuery
44 * @param query
45 * @param options
46 */
47export declare function useMediaQuery(
48  query: MaybeRefOrGetter<string>,
49  options?: ConfigurableWindow & {
50    ssrWidth?: number
51  },
52): ComputedRef<boolean>
53```
54