> For the complete documentation index, see [llms.txt](https://yanzhandong868.gitbook.io/v3hooks/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yanzhandong868.gitbook.io/v3hooks/ui/usemediaquery.md).

# useMediaQuery

一个监听 mediaQuery 状态的 Hook。

## 使用Demo

```
<template>
  <div class="hello">
    <div>
      <p> value:{{ state }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { watch } from 'vue'
import { useMediaQuery } from "v3hooks";

export default {
  props: {
    msg: String,
  },
  setup() {
    const state = useMediaQuery('(min-width: 480px)');

    watch(
      state,
      (value)=>{
        if(!value) console.log('已经是480px以下了')
      }
    )

    // useVirtualList测试
    return {
      state
    };
  },
};
</script>
```

useMediaQuery接受一个MediaQuery条件, 导出一个state boolean值来判断是否满足MediaQuery条件

## Api

```
const useMediaQuery: (query: string) => vue.Ref<boolean>;
```

### Params

| 参数    | 说明           | 类型     | 默认值 |
| ----- | ------------ | ------ | --- |
| query | MediaQuery条件 | string | -   |

### Result

| 参数    | 说明              | 类型      |
| ----- | --------------- | ------- |
| state | 否满足MediaQuery条件 | boolean |