Search code examples
cssresponsive-designmedia-queriesviewport

CSS media queries - what minimum width should I take into account?

I'm practicing with some responsive design basics and one question that a lot of tutorials don't answer explicitly is what minimum width to take into account when targeting mobile devices.

What I've seen most so far is @media only screen and (max-width:480px){...} for smartphones and then @media only screen and (min-width:481px) and (max-width:768px){...} for tablets. And so on.

I think the smallest screens that are used on a (reasonably) regular basis are 320px by 480px. However, the 320px width does not have to be taken into account due to the option of using landscape orientation. Right?

In other words, is it reasonable to assume that I'll always have at least 480px of width for a design? How do others handle this?

Solution

  • The Exact and ideal answer would be 320px.