使用多個@media（最大寬度）CSS

Question

我正在嘗試制作一個響應式網站，並且正在使用@media only screen and (max-width:...) @media only screen and (min-width:...)來嘗試調整大小。

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

這里的小提琴將解釋我正在嘗試做的事情。

的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（或更小）時，將顯示橙色邊框
• 如果寬度為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;
    }
}

演示版

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

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/