当有很多媒体查询时，它们不起作用

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-mediaqueries.js

Answer 1

我有这个工作......虽然获得每个触发器的确切窗口是棘手的。

---

编辑： 媒体查询的顺序很重要——当你有重叠的高度和宽度时，你将陷入痛苦的世界。如果您颠倒查询的顺序，您将获得更多的工作。

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

如果您的盒子相互放在一起，请正确排序，您会没事的

如果您有重叠的框，则会有一些区域无法按您的意愿定位。

---

您最好先使用移动设备并在宽度和高度上使用 MIN 而不是 MAX。此外，您更擅长根据内容选择断点，而不是根据任意屏幕分辨率选择 - 因为那里有太多的断点，您永远无法全部获得。

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());
}