Breakpoints for Responsive Design

Ethan Marcotte’s excellent Responsive Web Design (published in 2011 and that will matter as time goes by) has a handy table of device-width breakpoints for building a Website that responds to the visitor’s context. I find it so handy that I’m putting it here, without apology, for easy reference. Really, though, you should buy the book.

Width Description
320 pixels For small screen devices, like phones, held in portrait mode.
480 pixels For small screen devices, like phones, held in landscape mode.
600 pixels Smaller tablets, like the Amazon Kindle (600×800) and Barnes and Noble Nook (600×1024, held in portrait mode.
768 pixels Ten-inch tablets like the iPad (768×1024) held in portrait mode.
1024¬†pixels Tablets like the iPad (1024×768) held in landscape mode, as well as certain laptop, netbook, and desktop displays.
1200 pixels For widescreen displays, primarily laptop and desktop computers.

Personally, I rarely find much reason to make a site wider than 1000 pixels and often restrict the width using max-width. But that could just be me.