Why is my media query not working after first breakpoint?

Question

I am trying to make a simple webpage responsive but somehow, after the first breaking point, nothing happens. I put the whole code in this fiddle: https://jsfiddle.net/Cilvako/umwhLdqx/

Bellow are the breakpoints I am trying to use but still haven't got to the third since I couldn't make the second work.

/ Media Query /

 @media screen and (min-device-width : 1px) and (max-device-width : 480px) {

       }

 @media screen and (min-width : 481px) and (max-width :  768px) {


      }




 @media screen and (min-width : 769px) and (max-width :  1200px) {


    }




    @media only screen and (min-width : 1200px) {

       }

Answer 1

您应该在媒体查询中编写CSS，并且还可以使用“ {”和“}”来正确关闭和打开它们，而不必费力。

Answer 2

Don't mix device-width with the normal width if you can. Simply use min-width and max-width if you're targeting only browser window size.

Read this if you're confused CSS media queries min-width and min-device-width conflicting?

Answer 3

A media query looks something like

@media screen and (min-width : 769px) and (max-width : 1199px) {
    h1 { color: blue; }
}

@media screen and (min-width : 1200px) and (max-width : 1800px) {
    h1 { color: green; }
}

So between 769px and 1199px, h1 s would be blue, and between 1200px and 1800px they would be green. I'm not seeing that in your JSFiddle - the brackets are not closed properly, and I can't see what you're trying to do with the rules.

Answer 4

You almost never ever ever need a max-width

fiddle

body {
  background: gray;
}


@media screen and (min-width: 500px) {
  body {
    background: red;
  }
}

@media screen and (min-width: 500px) {
  body {
    background: red;
  }
}

@media screen and (min-width: 800px) {
  body {
    background: lightblue;
  }
}

@media screen and (min-width: 1000px) {
  body {
    background: orange;
  }
}

@media screen and (min-width: 1300px) {
  body {
    background: pink;
  }
}