Media queries—only part of the solution

Oh… best put that ice back in the freezer. Clearly our work is far from over; that looks horrible on the smaller 320 pixel wide viewport of our iPhone. Our media query is doing exactly what it should, applying styles dependent upon the features of our device. The problem is however, that the media query covers a very narrow spectrum of viewports. Anything with a viewport under 768 pixels is going to experience clipping and anything between 768 and 960 pixels will experience clipping as it will get the non-media query version of the CSS styles which, as we already know, doesn't adapt once we take it below 960 pixels wide (your author rests his head in his hands and lets out a long sigh).

We need a fluid layout

Using media queries alone to change a design is fine if we have a specific known target device; we've already seen how easy it is to adapt a device to the iPad. But this strategy has severe shortcomings; namely, it isn't really future-proof. At...