Hi guys,
I have recently opened the pandora’s box of responsive design and although I am a strong CSS developer, I have had to learn mobile/tablet development on the fly, just haven’t had the time to hit the books as much as I normally would due to vast workloads so I want to just describe what I am doing and to pick your brains.
So anyway I am going with mainly media query based designs and I have a choice of have 2 queries that I have been using for mobile lately,
@media only screen and (max-width: 767px) {
#tagline .row .eightcol {
width: 97%;
}
}
OR…
@media only screen and (min-width: 480px) and (max-width: 767px) {
#tagline .row .eightcol {
width: 97%;
}
}
Now I am wondering if the second one is even relevant because surely the smallest device I should really care about is something like a smaller screen smartphone, maybe something like 3" display. Anything smaller would be such an inferior device(like a tiny Nokia) that people wouldn’t want to browse the web much anyway, am I right or should I use the second query above and then have one below that again to target the really tiny devices?
I suppose its maybe how long is a piece of string and how much is someone paying you but atm I am just using the below 767px one and all Smartphones (that I have seen anyway) look fine.
Your advice is much appreciated.