Supporting the full range of device sizes – responsive web design

Responsive web design (RWD) is the concept of making a single page work for every device size. That means, we're not just talking about mobile phones with a 3.5-inch screen. That's only the beginning. We are going to support tablets of all sizes, and even desktop resolutions. For more on the concept of RWD, check out http://en.wikipedia.org/wiki/Responsive_web_design.

In order to make RWD work, let's set a few breakpoints based on common devices and resolution breakpoints. I'm going to start by redefining the default gallery item size to 50 percent. Why? It just feels more comfortable to me while browsing on a smartphone in portrait mode. So, here are the breakpoints. Let's put ...

Get Creating Mobile Apps with jQuery Mobile now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.