nextjs中如何应用媒体查询

Question

nextJs 应用程序中的媒体查询 -

我想在我的网站中应用媒体查询，以便我可以使其响应，我该怎么做？

我想全局应用 next js 以便我可以让它响应所有设备。

Answer 1

只需使用您选择的任何名称创建一个文件。比如styles文件夹下的“globals.css”。然后在该文件中写入您的媒体查询。

然后将“globals.css”文件导入到您的“_app.js”文件中。

您所有的 CSS 和媒体查询都将开始工作。

Answer 2

如果您愿意使用 third-party 库，MUI 在 useMediaQuery 中有您所需要的：

import * as React from 'react'
import useMediaQuery from '@mui/material/useMediaQuery'

export default function SimpleMediaQuery()
{
  const matches = useMediaQuery('(min-width:600px)')

  return <span>{`(min-width:600px) matches: ${matches}`}</span>
}

有关如何使用它的更多示例，请参阅上面链接的文档。

如果您想避免使用另一个库，这里有一个简单的自定义挂钩：

export const useMediaQuery = (width) =>
{
  const [targetReached, setTargetReached] = useState(false)

  const updateTarget = useCallback((e) =>
  {
    if (e.matches) setTargetReached(true)
    else setTargetReached(false)
  }, [])

  useEffect(() =>
  {
    const media = window.matchMedia(`(max-width: ${width}px)`)
    media.addEventListener('change', updateTarget)

    // Check on mount (callback is not called until a change occurs)
    if (media.matches) setTargetReached(true)

    return () => media.removeEventListener('change', updateTarget)
  }, [])

  return targetReached
}

用法：

// 600px
const matches = useMediaQuery(600)

nextjs中如何应用媒体查询

How to apply media query in nextjs

reactjs

next.js

frontend

media-queries