Как применить медиа-запрос в nextjs

Медиа-запрос в приложении nextJs —

Я хочу применить медиа-запрос на своем веб-сайте, чтобы я мог сделать его отзывчивым, как я могу это сделать?

Я хочу применить следующий js глобально, чтобы я мог сделать его отзывчивым для всех устройств.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
50
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Просто создайте файл с любым именем по вашему выбору. Например, «globals.css» в папке стилей. Затем напишите свои медиазапросы в этом файле.

Затем импортируйте файл «globals.css» в ваш файл «_app.js».

Все ваши CSS и медиа-запросы начнут работать.

Вы, похоже, не поняли вопроса. ОП говорит о MediaQuery в ReactJs.

Geeky Quentin 14.05.2022 11:28
Ответ принят как подходящий

Если вы хотите использовать стороннюю библиотеку, в 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)

Другие вопросы по теме