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

媒体查询在有很多时不起作用

1 个答案: