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

Question

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 ?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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