useMediaQuery 可以获取 是否是大屏，也可以获取是否是 黑夜 模式

vue-use 地址

原理很简单 主要是利用了 matchMedia 这个 api

源码

const isLargeScreen = useMediaQuery('(min-width: 1024px)')
const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')

其中 useMediaQuery

function useMediaQuery(query:string){
    let mediaQuery: MediaQueryList | undefined;
    const matches = ref(false)
    
    const update = ()=>{
        mediaQuery = window.matchMedia(query)
        matches.value = mediaQuery.matches
    }
    // 在 mounted 时进行调用

 if ('addEventListener' in mediaQuery)
      mediaQuery.addEventListener('change', update)
}
// 在 unOmounted 时进行卸载
if ('removeEventListener' in mediaQuery!)
        mediaQuery!.removeEventListener('change', update)

note:顺便带上 matchMedia 可以使用的参数