CSS媒体查询的问题

Question

我正在尝试刹车的正确点，以便可以向我的应用程序添加媒体查询。 我找到了一个很棒的网站http://sensitivepx.com/来测试我的应用程序。

我运行了我的应用程序，发现它显示我的应用程序在1257宽度和1576宽度之间制动，然后，我的应用程序将再次正常。 因此，我编辑查询以解决解决问题的需求，但仍然无法正常工作？

这是我目前的查询：

<link rel="stylesheet" media="(min-width: 1600px)" type="text/css" href="../Style/CommonStyle/Common1600Style.css"/>
<link rel="stylesheet" media="(max-width: 1280px)" type="text/css" href="../Style/CommonStyle/Common1280Style.css" />

然后我将其添加到媒体查询中，但仍然无法正常工作：

<link rel="stylesheet" media="(min-width: 1258px) and (max-width: 1576px)" type="text/css" href="../Style/MaxWidth1280StyleSheet.css" />

有人知道我的应用程序中断但未命中该媒体查询的原因吗？

Answer 1

“不打那个媒体查询”是什么意思？ 我在这里有点茫然，因为您没有提供示例CSS规则，该规则未应用或未提供任何样式表的内容，甚至没有说明遇到问题时的窗口大小。 但是这里。

您确定这不是规则优先事项吗？ 如果你的浏览器窗口1257px与1280px之间的话，会有两套规则浏览器尝试应用如双方样式Common1280Style.css和MaxWidth1280StyleSheet.css被加载并在更具体的规则Common1280Style.css还是将跨越一个在MaxWidth1280StyleSheet.css 。

假设您以显示的顺序加载样式表，例如

<link rel="stylesheet" media="(min-width: 1600px)" type="text/css" href="../Style/CommonStyle/Common1600Style.css"/>
<link rel="stylesheet" media="(max-width: 1280px)" type="text/css" href="../Style/CommonStyle/Common1280Style.css" />
<link rel="stylesheet" media="(min-width: 1258px) and (max-width: 1576px)" type="text/css" href="../Style/MaxWidth1280StyleSheet.css" />

为了说明我的意思，这是http://codepen.io/anon/pen/Bjwsa，请注意（max-width：1280）的颜色规则优先于（min-width：1258px）和（max-宽度：1576px）（如果浏览器宽度在1258px和1280px之间）。 由于其更具体的例如，对于规则body #example被认为不仅仅是具体#example