React-JSS 媒体查询不适用于 chrome 移动模拟器

Question

我在我的 React 项目中使用 JSS，我遇到了一个奇怪的问题，我觉得很难解决。基本上我写媒体查询，当我缩小我的桌面浏览器时它会被触发。虽然在使用设备工具栏时，它似乎不起作用。当设备 "width" 小于 600px 时，我试图隐藏跨度。任何帮助将不胜感激。

代码如下：

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',
    },
  },
});

Answer 1

好的，问题已解决。它在应用程序的一个完全不同的部分。

我忘记在我的代码中添加这一行：

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

Answer 2

您始终可以检查生成的 CSS，如果它是您期望的那样，那么您对 CSS/html 的假设是错误的。最后，jss 除了生成常规 CSS.

之外什么都不做

React-JSS 媒体查询不适用于 chrome 移动模拟器

React-JSS Media Query does not work with chrome mobile emulator

css

jss