Max-Width vs. Min-Width

Question

Most of the tutorials I\'m reading on using Media Queries are demonstrating the use of min-width, but I\'m rarely seeing people using max-width.

Answer 1

It really depends on how your stylesheet works. For example:

@media screen and (min-width:100px) {
    body { font-weight:bold; }
}

@media screen and (min-width:200px) {
    body { color:#555; }
}

The above two media queries would make the body font bold if the screen is greater than or equal to 100px, but also make the color #555 if it's greater than or equal to 200px;

Another example:

@media screen and (max-width:100px) {
    body { font-weight:bold; }
}

@media screen and (max-width:200px) {
    body { color:#555; }
}

Unlike the first example, this makes the body font bold and color #555 only if the screen width is between 0 and 100px. If it's between 0px and 200px it will be color #555.

The beauty of media queries is that you can combine these statements:

@media screen and (min-width:100px) and (max-width:200px) {
    body { font-weight:bold; color:#555; }
}

In this example you are only targeting devices with a width between 100px and 200px - nothing more, nothing less.

In short, if you want your styles to leak out of media queries you'd use either min-width or max-width, but if you're wanting to affect a very specific criteria you can just combine the two.