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.
One thing I am facing is a custom navigation for any device whose 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 instead 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?
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.