Media Queries breakpoints clarification-CodePudding

I've setup these breakpoints

    X-Small devices (portrait phones, less than 576px) 
@media (max-width: 576px) {
  body {
    background-color: red;
  }
}

 Small devices (landscape phones, less than 768px) 
@media (max-width: 768px) {
    body {
    background-color: blue;
  }
}

Medium devices (tablets, less than 992px) 
@media (max-width: 992px) {
    body {
    background-color: green;
  }
}

 Large devices (desktops, less than 1200px) 
@media (max-width: 1200px) {
    body {
    background-color: purple;
  }
}

 X-Large devices (large desktops, less than 1400px) 
@media (max-width: 1400px) {
    body {
    background-color: yellow;
  }
}

Why if I try to resize the screen the colour is always yellow and doesn't change according with the breakpoints?

CodePudding user response：

Because max-width: 1400px is also true for smaller screens. Either place the larger screens at top so that the queires for smaller screens overwrite the value or use @media (min-width: value) and (max-width: value) { ... }

Starting with the largest to the smallest screen:

@media (max-width: 1400px) {
  body {
    background-color: yellow;
  }
}

@media (max-width: 1200px) {
  body {
    background-color: purple;
  }
}

@media (max-width: 992px) {
  body {
    background-color: green;
  }
}

@media (max-width: 768px) {
  body {
    background-color: blue;
  }
}

@media (max-width: 576px) {
  body {
    background-color: red;
  }
}

Using the and-keyword:

@media (max-width: 576px) {
  body {
    background-color: red;
  }
}

@media (min-width: 577px)
  and (max-width: 768px) {
  body {
    background-color: blue;
  }
}

@media (min-width: 769px)
  and (max-width: 992px) {
  body {
    background-color: green;
  }
}

@media (min-width: 993px)
  and (max-width: 1200px) {
  body {
    background-color: purple;
  }
}

@media (min-width: 1201px)
  and (max-width: 1400px) {
  body {
    background-color: yellow;
  }
}