Question

我正在努力建立一个快速响应的网站，并正在使用@media only screen and (max-width:...)＆amp; @media only screen and (min-width:...)尝试衡量一切。

在一个@media上使用多个div时，它似乎不起作用。

小提琴here将解释我想要做的事情。

HTML

<div class="mainNavi2">
  <p> test </p> 
</div>

CSS

@media only screen and (max-width: 800px) {
  .mainNavi2{
    border:1px solid orange; 
  }
}

@media only screen and (min-width: 851) {
  .mainNavi2{
    border:1px solid green;
  }
}

@media only screen and (max-width: 850) {
  .mainNavi2{
    border:1px solid blue;
  }
}

我基本上要做的是：

当屏幕为800px（或更低）时，将显示橙色边框

宽度为850px（或更小），将显示蓝色边框

宽度为851（或更多），将显示绿色边框。

它们都是分开工作的，但是当它们组合在一起时，只有max-width:800px有效。

Answer 1

由于媒体查询的顺序，橙色被蓝色覆盖。重新排列它们并起作用：

@media only screen and (max-width: 850px) {
    .mainNavi2 {
        border:1px solid blue;
    }
}
@media only screen and (max-width: 800px) {
    .mainNavi2 {
        border:1px solid orange;
    }
}
@media only screen and (min-width: 851px) {
    .mainNavi2 {
        border:1px solid green;
    }
}

<强> Demo

更好的方法可能是遵循Bootstrap的领先优势，只使用升序min-width语句进行移动优先：

.mainNavi2 {
    border:1px solid orange;
}
@media only screen and (min-width: 801px) {
    .mainNavi2 {
        border:1px solid blue;
    }
}
@media only screen and (min-width: 851px) {
    .mainNavi2 {
        border:1px solid green;
    }
}

<强> Demo 2

Answer 2

这将有效：http://jsfiddle.net/q9ae3r7p/3/

在其他媒体查询中的数字之后，您忘记了px。

您的橙色边框永远不会起作用，因为蓝色媒体查询会覆盖它，因为您在两者上都有max-width。

要完成这项工作，您应该添加一组在一组屏幕宽度之间激活的媒体查询。我认为你需要800到850之间的蓝色边框。所以代码看起来像这样：

@media only screen and (min-width: 800px) and (max-width: 850px) {

  .mainNavi2{
    border:1px solid blue;
  }
}

另一种解决方案是重新排列它们的顺序，以便800px查询覆盖850px查询。

Answer 3

这是因为媒体查询的顺序。另外我认为你可以用较少的媒体查询来做到这一点。

.mainNavi2 {
    border:1px solid green;
}

@media only screen and (max-width: 850px) {
    .mainNavi2 {
        border:1px solid blue;
    }
}

@media only screen and (max-width: 800px) {
    .mainNavi2 {
        border:1px solid orange; 
    }
}

小提琴：http://jsfiddle.net/skeurentjes/q9ae3r7p/7/

使用多个@media（max-width）CSS

3 个答案: