我的媒体查询不起作用

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

这主要取决于您的项目，因为归根结底，这都是关于维护和轻松添加更多内容的。

因此，如果您正在进行的项目中只有少数媒体查询，我建议您将它们全部保留在样式表的底部，但要在其顶部添加注释以使其明确，也便于以后查找。

但是，如果您知道要在媒体查询中精心定义许多属性，并且还定义了各种设备，那么我建议您出于可读性/维护性的原因将它们分开。