React-JSS Media Query不适用于chrome mobile模拟器

Question

我在我的React项目中使用JSS，我遇到了一些奇怪的问题，我发现很难解决。基本上我写媒体查询，当我缩小桌面浏览器时会触发它。虽然在使用设备工具栏时，它似乎不起作用。当设备“宽度”小于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之外别无其他。