Common CSS Media Queries Break Points

173

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.

This question is tagged with css responsive-design media-queries

~ Asked on 2013-05-08 14:31:45

The Best Answer is


196

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.)

~ Answered on 2013-05-08 15:43:17


97

I've been using:

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}

It keeps things relatively simple and allows you to do something a bit different for phones in portrait mode (a lot of the time I find myself having to change various elements for them).

~ Answered on 2013-05-08 14:54:07


Most Viewed Questions: