我的媒体查询不起作用

Question

Does anyone know why my media queries code doesn't work?Thanks!

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

More details in my github https://github.com/kmfb/udacityProjects/tree/master/column%20drop

Answer 1

Just move the @media to the bottom of the css page.
Check working example.
Cheers,
https://jsfiddle.net/frc7r123/

Answer 2

It works, but you need to place your media query below your other CSS. Otherwise it won't overwrite anything.

Answer 3

It mostly depends on your project because at the end of the day it is all about maintenance and adding more stuff to it easily.

So, if you are working on a project which only has a few media queries I would suggest leaving them all at the bottom of your stylesheet but putting comments on top of it to make it explicit and also easier for you to find it later.

However, if you know you are going to have a lot of properties meticulously defined in your media queries and also have various devices defined then I would suggest separating them out just for readability/maintenance reasons.