Common CSS Media Queries Break Points

css responsive-design media-queries
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.)

Related questions

iPhone 5 CSS media query

The iPhone 5 has a longer screen and it's not catching my website's mobile view. What are the new responsive design queries for the iPhone 5 and can I combine with existing iPhone queries? My current media query is this: @media only …

Read More
Bootstrap - Removing padding or margin when screen size is smaller

EDITED: Maybe I should ask which selector sets up the side padding when the screen is reduced to below 480px width? I have been browsing bootstrap-responsiveness.css for a while to locate this but nothing seems to affect this. Original …

Read More
IE8 support for CSS Media Query

Does IE8 not support the following CSS media query: @import url("desktop.css") screen and (min-width: 768px); If not, what is the alternate way of writing? The same works fine in Firefox. Any issues with the code below? @import url("…

Read More