Open a browser; let's go and visit some sites.

Now, you may think I've lost my marbles, but stay with me. I want to show you a few examples. Let's take a look at a couple of example sites at different screen widths. How about this example from my favorite coffee company, Starbucks:

Try resizing the browser window; if you get small enough, you will see something akin to this:

Here's another example—we cannot forget the site for the publisher of this book, Packt:

Try changing the size of your browser window. If we resize it enough, it will show this:

For our third and final example, let's go visit CSS Tricks, the site created by Chris Coyier, at http://www.css-tricks.com:

If we resize this to a smaller width, this is what we will get:

Now, what was the point of all that, I hear you ask? Well, it's simple. All of them use media queries in some form or other; CSS Tricks uses the queries built into WordPress, Packt's site is hosted using Drupal, and Starbucks' site is based around the Handlebars template system.

The key here is that all use media queries to determine what should be displayed; throughout the course of this chapter, we'll explore using them in more detail, and see how we can use them to better manage content in responsive sites. Let's make a start with exploring their make up in more detail.