Медиа-запрос в приложении nextJs —
Я хочу применить медиа-запрос на своем веб-сайте, чтобы я мог сделать его отзывчивым, как я могу это сделать?
Я хочу применить следующий js глобально, чтобы я мог сделать его отзывчивым для всех устройств.
Просто создайте файл с любым именем по вашему выбору. Например, «globals.css» в папке стилей. Затем напишите свои медиазапросы в этом файле.
Затем импортируйте файл «globals.css» в ваш файл «_app.js».
Все ваши CSS и медиа-запросы начнут работать.
Если вы хотите использовать стороннюю библиотеку, в MUI есть именно то, что вам нужно в использованиеMediaQuery:
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)
Вы, похоже, не поняли вопроса. ОП говорит о MediaQuery в ReactJs.