React-JSS Media Query не работает с мобильным эмулятором Chrome

Я использую JSS в своем проекте React, и я столкнулся со странной проблемой, которую мне трудно решить. По сути, я пишу медиа-запрос, и он срабатывает, когда я сужаю свой настольный браузер. Хотя при использовании панели инструментов устройства она не работает. Я пытаюсь скрыть диапазон, когда "ширина" устройства меньше 600 пикселей. Любая помощь будет оценена.

Вот код:

const menuStyles = theme => ({
  flex: {
    display: 'flex',
    alignItems: 'center',
  },
  wrapper: {
    composes: '$flex',
    cursor: 'pointer',
  },
  span: {
    fontFamily: theme.fontMontserrat,
    marginRight: '30px',
  },
  '@media screen and (max-width: 600px)': {
    span: {
      display: 'none',
    },
  },
});

2 ответа

Ок, исправил проблему. Это было в совершенно другой части приложения.

Я забыл добавить эту строку в мой код:

<meta name=viewport content="width=device-width,initial-scale=1">

Вы всегда можете проверить сгенерированный CSS, если вы ожидаете, что у вас неправильные предположения о CSS/ HTML. В конце концов, jss не делает ничего, кроме генерации обычного CSS.

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