Over the next few pages, we'll be exploring how we can make good use of media queries; we'll be constructing two demos that illustrate some of the ways we can use queries. The demos themselves may not look complicated, but this is not a bad thing; making code complex only serves to make it more fragile, prone to breaking, and harder to support.
Let's take a look at our first demo, which adds responsive support to a basic portfolio template page.
Making it real—what a title! There is a good reason for it. When exploring new concepts, one of my pet hates is exploring a demo that is so minimalistic as to not include anything that gives a true picture of the functionality that I want to begin using in my development.
Creating media queries should not be an exception. In our previous example, we created some test queries to see how three boxes would interact when the browser window is resized. To put this into context though, requires something a little...