Writing our media queries

Now for some fun, we're going to add some media queries to our theme's stylesheet. The best place to do this is all together at the end, for the following reasons:

• It makes it easy for us to work with

• More importantly, it means that any styling we define for smaller devices will override other styling for the same elements higher up in the stylesheet

You may have heard of the concept of Mobile First, where mobile styling is set first and then changes are added for desktop sites. This can help to speed up a mobile site, as the browser doesn't have to work its way through all the desktop styling first, and is definitely a method to consider. However, as we already have a site aimed at desktops, we will place our mobile styling at the end of our stylesheet, and start with the device closest to the size of a desktop monitor—the iPad in portrait mode.

Note

You can find out more about Mobile First in Luke Wroblewski's blog at http://www.lukew.com/.