James Jeffery James Jeffery - 3 months ago 18
CSS Question

Max-Width vs. Min-Width

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
.

Is this some sort of design trend, or pattern, why people are using
min-width
over
max-width
?

For example, I'm designing a site starting from mobile, working up to the desktop. I am using Foundation 4, but using media queries to remove various elements on the page and re-position the source order.

On thing I am facing is a custom navigation for any device who's width is 360px or less. I want them to have a vertical navigation, rather than an inline horizontal. So my idea was to use
max-width
to target these devices.

Should I be using
min-width
if I am designing mobile first? I.e. all the default styles are for mobile, and thus using
min-width
to progressively enhance the layout?

Answer

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.