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.