媒体查询在有大量媒体查询时不起作用

Question

当我写媒体和检查之后但是当我写5-6个媒体查询时，在我检查它们之后，它们就不起作用了！

我尝试下一个代码：

@media screen and (max-width: 1280px) and (max-height: 1024px) {...}

@media screen and (max-width: 1366px) and (max-height: 768px) {...}

@media screen and (max-width: 1400px) and (max-height: 1050px) {...}

@media screen and (max-width: 1440px) and (max-height: 900px) {...}

在这里，在StackOverflow中，我看到了与我一样的帖子，代码如下：

@media screen and (max-width: 1920px), screen and (max-height: 1080px) {....}

但也不起作用。有什么问题吗？

更新

我在IE8上与JS插件respond.js和css3 3-mediaqueries.js一起使用它

Answer 1

我有个工作..。尽管获得每个触发器的确切窗口是很棘手的。

编辑:媒体查询的顺序很重要--当你有重叠的高度和宽度时，你将处于一个痛苦的世界。如果您颠倒您的查询顺序，您将得到更多的工作。

请记住，最后的匹配规则将获胜。

如果你的盒子是在彼此的内部，得到正确的订单，你会没事的。

如果您有重叠的框，则会有一些区域无法按您的意愿达到目标。

你最好先移动，使用最小，而不是最大的宽度和高度。而且，你更善于根据你的内容来选择你的断点，而不是在任意的屏幕回复上--因为有那么多你永远不会得到它们。

http://codepen.io/elliz/pen/lynEt

<div class="a">
  Test<br>
  width = <span class="w">resize me</span><br>
  height = <span class="h">resize me</span>

  <p>Breakpoints:</p>
  <ul>
    <li>500w 500h - red (go to 499w, 499h to see)</li>
    <li>600w 400h - green (go to 599w, 399h to see)</li>
    <li>700w 550h - gold (go large to see)</li>
  </ul>
</div>

.a {
  font-family: sans-serif;
  padding:10px 20px;
  font-weight: bold;
  background-color: cornflowerblue;
}

@media screen and (max-width: 700px) and (max-height: 550px) {
  .a {background: goldenrod;}  
}

@media screen and (max-width: 600px) and (max-height: 400px) {
  .a {background: green;}  
}

@media screen and (max-width: 500px) and (max-height: 500px) {
  .a {background: red;}  
}

// requires jQuery
$(window).resize(function (){
  showsizes();
});

$(window).ready(function (){
  showsizes();
});


function showsizes(){
    var w = $(window);
  $(".w").text(w.width());
  $(".h").text(w.height());
}