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

Chor 0
Viewed 23

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 ?

css
4 Answers
@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.

DCodeMania0

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;
    }
}
nourhomsi0 

@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.

Sunil gongle0

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

Sukhjinder Singh0
Related