html - 使用多个@media (max-width) CSS

Question

我正在尝试制作一个响应式网站，并且正在使用 @media only screen and (max-width:...) & @media only screen and (min-width: ...) 尝试调整所有内容的大小。

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

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

我基本上想做的是:

• when the screen is at 800px (or less), an orange border will be displayed
• for width of 850px (or less) a blue border will be displayed
• for a width of 851 (or more) a green border will be displayed.

它们都是单独工作的，但是当它们放在一起时，只有 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