Question

我正在尝试获取我的应用程序的正确点，因此我可以向我的应用程序添加媒体查询。我找到了一个名为http://responsivepx.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-width：1576px）的颜色规则浏览器宽度介于1258px和1280px之间。因为它更具体，例如body #example的规则被认为比#example

更具体

CSS媒体查询问题

1 个答案: