Letting media queries overwrite "regular" css

Question

I'm trying to target old iPhones and desktop devices with media queries.

Would if be better to use one media query that overwrites the current css in case of a "phone" match:

body { color: red; }

@media (max-width:480px) {
    body { color: blue; }
}

Or is there any point of writing it like this:

@media (min-width:480px) {
    body { color: red; }
}

@media (max-width:480px) {
    body { color: blue; }
}

Answer 1

Although both methods work, I would use the first because using the first method:

1) Browsers which don't support media queries (ahem IE8) will at least have fallback styles

2) Your code is slightly smaller and less messy.

---

Also, for what it's worth (although not really related to your question) if you're interested in a mobile-first approach you could re-write the css as:

body { color: blue; }

@media (min-width:480px) {
    body { color: red; }
}

Answer 2

As @Mehul mentioned, both are okay, A simple google search brings you millions of resources. I found these two articles useful for mobile device web developing iPhone CSS—tips for building iPhone websites and width versus device-width, I hope they are useful.

Answer 3

Both are okay.

@media (max-width) would target every device under a specific resolution given and @media (min-width) would target every device above a specific resolution given.

Hope that helps.