Common CSS Media Queries Break Points

Miguel Moura picture Miguel Moura · May 8, 2013 · Viewed 329.1k times · Source

I am working on a Responsive Web Site with CSS Media Queries.

Is the following a good organization for devices? Phone, Ipad (Landscape & Portrait), Desktop and Laptop, Large Screen

What are the common media queries break-point values?

I am planning to use the following breakpoints:

  • 320: Smartphone Portrait
  • 481: Smartphone Landscape
  • 641 or 768 ???: IPad Portrait ???
  • 961: IPad Landscape / Small Laptop ???
  • 1025: Desktop and Laptop
  • 1281: Wide Screen

What do you think? I have a few doubts as ??? points.

Answer

ralph.m picture ralph.m · May 8, 2013

Rather than try to target @media rules at specific devices, it is arguably more practical to base them on your particular layout instead. That is, gradually narrow your desktop browser window and observe the natural breakpoints for your content. It's different for every site. As long as the design flows well at each browser width, it should work pretty reliably on any screen size (and there are lots and lots of them out there.)