Css 媒体查询不符合正确的样式表

我创建了一个网站来测试媒体查询，并在我的样式表中包含以下内容：

@media(max-width:4096px){...}
@media(max-width:1920px){...}    
@media(max-width:1440px){...}
@media(max-width:1366px){...}
@media(max-width:1136px){...}
@media(max-width:1080px){...}
@media(max-width:1024px){...}
@media(max-width:980px){...}
@media(max-width:960px){...}
@media(max-width:768px){...}
@media(max-width:720px){...}
@media(max-width:640px){...}
@media(max-width:320px){...}

问题是，每当我使用Firefox响应设计工具时，我都会缩放到不同的分辨率（比如1366px）。它将从

1440px

加载样式，而不是加载

1366px

样式

这不仅适用于

1366px

，而且适用于所有查询。然而，当我在Chrome上尝试这一点时，我并没有发现这个问题。我使用Chrome36和Firefox30，所以我认为这个版本没有问题

有没有办法让我的网站在没有这个问题的情况下重新调整大小，为什么会出现这个问题？

---

谢谢。

因为您需要包括最小宽度示例

@media(max-width:1440px) AND (min-width:1367px){...}
@media(max-width:1366px) AND (min-width:1137px){...}

---

这将有助于消除冲突。

我起初认为这一点，但CSS级联，顺序正确Roderick，即使它级联，也可能冲突。-我总是使用“最大宽度”和“最小宽度”来更加具体，并减少可能发生的碰撞。可能不是这样，但至少他会确定是的，设置上限和下限实际上会阻止级联，这在某些情况下很有用。然而，这可能不是100%可靠，像素不确定，但当你使用相对单位，如ems时，这肯定是一个问题。这一切都归结于是否修改了完全相同的属性。如果相同，则依赖级联。如果它们不同，就设置上/下限。使用EMS BoltClock并不可靠，但我确实为一些使用像素的网站使用了上下限，而且效果很好。这取决于此人是否有问题，是否被迫使用上限和下限或使用正常的级联内置。您是在查询中修改不同的属性，还是在每个查询中都修改相同的属性？有关详细信息，请在“媒体查询”中参阅