Do CSS queries need a max-width variable?

Question

Bootstrap includes some default media queries that look like this:

@media (min-width: 768px) {
  /* Pull out the header and footer */
  .masthead {
    position: fixed;
    top: 0;
  }

@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 700px;
  }

Why don't these include the max-width variable? Is that inherently implied by just using min-width, i.e. does CSS just simply "know" to take the highest min-width possible?

Answer 1

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) { /* ... */ }

Answer 2

There is a tendency to design for the smaller screen (ie. mobile) first and use media queries to target larger screens (ie. desktop) users. This is what you are seeing in the Bootstrap CSS.

The main stylesheet applies to the mobile browser (in fact all browsers). Then a media query is used to target slightly larger screens to apply specific rules:

@media (min-width: 992px) {

This targets window sizes greater than (or equal to) 992px (ie. whose minimum width is 992px).

There is no max-width specified here, so this applies to all large windows.