使用多个@media（最大宽度）CSS(Using multiple @media (max-wid

我试图做一个负责任的网站，并且正在使用@media only screen and (max-width:...)和@media only screen and (min-width:...)来尝试和大小的一切。

当使用多个@media一个div ，它似乎并没有工作。

小提琴这里将解释什么，我试图做的。

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

什么我基本上试图做的是：

当屏幕是在800像素（或更小），为橙色边界将显示
为850像素（或更小）的宽度的蓝色边界将显示
为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;
    }
}

演示

一个更好的办法是遵循引导的领先优势，进入移动第一，只用升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;
    }
}

演示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/

文章来源: Using multiple @media (max-width) CSS