How to express a width open interval with css media query?-CodePudding

I have 3 open intervals of screen width now. They are (0,600], (600,800) and [800,1000] and each has a diffferent css style. For example:

@media screen and (max-width: 600px) {
  background: #000
}
@media screen and (min-width: 800px) and (max-width: 1000px){
  background: #eee
}

But how should I express (600,800) with ccs media query ?

CodePudding user response：

@media screen and (max-width: 600px) {
  background: #000
}
@media screen and (min-width: 800px) and (max-width: 1000px){
  background: #eee
}
@media screen and (min-width: 600px) and (max-width: 800px){
  background: #fff
}

You can use 3rd media query.

CodePudding user response：

Start with a default value, which is the value of the mobile first. Then modify the values from a minimum with and up:

HTML:

CSS:

.bg {
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

@media screen and (min-width: 600px){
    .bg {
        background-color: steelblue
    }
}


@media screen and (min-width: 800px){
    .bg {
        background-color: tomato
    }
}


@media screen and (min-width: 1000px){
    .bg {
        background-color: #2c3e50;
    }
}

CodePudding user response：

@media (max-width: 1000px) {
  background: #eee;
}

@media (max-width: 800px) {
  background: #fff;
}

@media (max-width: 600px) {
  background: #000;
}

This order will execute based on screen size and CSS will be applied accordingly.

CodePudding user response：

You can define these interval for media queries link below:

     @media screen and (min-width: 801px) and (max-width: 1000px){
         background: #eee
     }
     @media screen and (min-width: 601px) and (max-width:800px){
         background: #cccccc
     }
     @media screen and (max-width: 600px) {
          background: #000
     }

Now

The first media query will work from 0px to 600px

The second one will work 601px from to 800px

And the Third one will work from 801px to 1000px