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 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 them into the chapter8.css file:
.gallery li {
float: left; width: 50%; }
/* iPhone Horizontal -------------------*/
@media all and (min-width: 480px) {
.gallery li { width: 33.33333333%; }
}
/* iPad Vertical -----------------------*/
@media only screen...