CODEWITHSUNDEEP
cssresponsive-designmedia-queriesviewport
RubenGeert
RubenGeert

Reputation: 2952

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?

Upvotes: 1

Views: 3757

Answers (2)

user22749274
user22749274

Reputation: 1

It somehow depends upon your website's layout and design. The more you have complex layout and design you have to take a minimum width. In most cases your CSS code may be a reason to set minimum width media queries.

Upvotes: 0

Nitesh
Nitesh

Reputation: 15779

The Exact and ideal answer would be 320px.

Upvotes: 6

Related Questions