CSS：媒体查询 CSS 在 50% 的情况下无法正常工作（Chrome）答案

【问题标题】：CSS: media query CSS not working 50% of the time (Chrome)CSS：媒体查询 CSS 在 50% 的情况下无法正常工作（Chrome）
【发布时间】：2017-05-12 04:15:43
【问题描述】：

我有一个网站，当浏览器的宽度低于某个像素宽度时，我正在使用媒体查询链接元素应用一些覆盖的 CSS。

<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" media='screen and (max-width: 960px)' href='css/mainNarrow.css' />

问题是，在 50% 的情况下，当浏览器的宽度发生变化时，第二个样式表似乎没有启动。我正在使用 Chrome 58.0.3029.96（64 位）。检查元素，第二个样式表似乎甚至不存在，所以我不认为这是一个优先问题。

这里是网站，您可以刷新和调整大小以自己试验。在我刷新的一半时间里，调整大小的行为是不同的。您可以通过将顶部菜单替换为汉堡菜单按钮来判断第二个样式表何时启动：

任何想法为什么会发生这种情况？

【问题讨论】：

标签： html css

【解决方案1】：

您可能应该只将该 CSS 添加为辅助样式表并删除该媒体属性。在您的风格中，您将代码包装在媒体查询中，例如：

@media screen and (max-width: 960px) { /*960*/
  // Put your CSS code here...
}

【讨论】：