我的媒體查詢不起作用

Question

有誰知道為什么我的媒體查詢代碼不起作用？

@media only screen and (min-width:450px){
  .dark-blue{
    width: 25%;
  }
  .blue{
    width: 75%;
  }
}

更多細節在我的github https://github.com/kmfb/udacityProjects/tree/master/column%20drop

Answer 1

只需將@media移到CSS頁面的底部即可。
檢查工作示例。
干杯，
https://jsfiddle.net/frc7r123/

Answer 2

它可以工作，但是您需要將媒體查詢放置在其他CSS下方。 否則它將不會覆蓋任何內容。

Answer 3

這主要取決於您的項目，因為歸根結底，這都是關於維護和輕松添加更多內容的。

因此，如果您正在進行的項目中只有少數媒體查詢，我建議您將它們全部保留在樣式表的底部，但要在其頂部添加注釋以使其明確，也便於以后查找。

但是，如果您知道要在媒體查詢中精心定義許多屬性，並且還定義了各種設備，那么我建議您出於可讀性/維護性的原因將它們分開。