Creating media queries opens up a world of possibilities; we are not forced to have to display every element of our page on each device, so we can be selective about what we show our visitors, depending on which device they use! We've covered a number of useful techniques in this chapter by just using a browser and text editor, so let's take a moment to recap what we've learned.

We kicked off with a quick interactive demo, to illustrate how some well-known sites have used media queries to realign content on screen, before exploring how media queries are constructed.

We then took a look at some of the different types. This included covering both the media types and features we can use to control how content is displayed. We then moved onto looking at some common breakpoint statements that we might use in our code, before exploring how we might need to create custom breakpoints for specific purposes. We also saw how we may even be able to reduce or remove breakpoints, if we make some simple changes to our code.

Next up came a more practical look at using media queries. We explored how we can use them to make content on a simple page display properly in a mobile device (allowing its orientation). We then covered how we can use media queries to control whether we display images of standard or higher resolution on screen.

We then rounded off the chapter with a look at fixing some common mistakes that we might make, before covering some of the options available that we can step up to using once we're more accustomed to creating media queries for our sites.

Phew, we've come to the end of the technical development; there is one more topic we should cover as part of our journey through creating responsive sites. There is no point in creating solutions if they are not efficient. Your visitors will not thank you if it takes an age to load a site! We can fix this with some simple tips and tricks, as part of optimizing our code. We'll explore this topic, and more, in the next chapter.