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

Question

我正在尝试创建一个响应式网站,并且正在使用@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;
  }
}

我基本上要做的是:

• 当屏幕为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;
    }
}

演示

一个更好的方法可能是遵循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;
    }
}

演示2