It has to do with logic.
TL;DR: See it as if/else statements in you code. You only add the max if you want a max specified.
You can read it like this:
#Div{ color: green; }
@media (min-width: 992px) {
#Div{ background: pink; }
}
This reads:
Make font->green
, and also
if( min-screen-width at least 992px ) BG -> pink
If you would have maxwidth it goes with the same logic, only as maximum.
If you have both:
#Div{ color: green; }
@media (min-width: 500px) and (max-width: 992px){
#Div{ background: pink; }
}
This reads:
Make font->green
, and also
if( min-screen-width atleast 500px AND a maximum of 992px ) BG -> pink
Easy demo for max-width, make something tablet resolution only (asuming everything 1024+ is desktop):
@media (min-width: 1024px) { /* ... */ }