A key part of any website must be the media used; after all, it would become boring without some form of color! This is no different for responsive sites; throughout the course of this chapter, we've covered some useful techniques for adding responsive media, so let's reflect on what we've covered in this chapter.

We kicked off with a look at making images fluid, which is the basic concept behind responsive media; we then swiftly moved on to look at using the HTML5 <picture> element, to see how it can be used to specify different sized images based on hardware capabilities. We explored a few pointers on what is available to use, should we decide to that existing native support is insufficient, and we need to progress from using just plain HTML and CSS.

Next up came a look at responsive video; we examined how to make externally hosted videos responsive, with just plain CSS. We also covered the techniques required to make the HTML5 <video> element responsive, if hosting externally is not an option. We also explored the HTML5 <audio> element, and saw how we can use similar techniques to make it responsive.

We then rounded off the chapter with a look at making standard text responsive; we covered how this has already been used in many demos throughout the book, before exploring the different techniques, such as using em or rem values, which are often better than standard pixel units. We then finished with a quick demo on using viewport units for font sizes, so we could see how to get the best of everything when creating responsive text.

Phew—a lot covered! Let's move on. Now that we have our layout and content in place, we need to consider how to resize them correctly. Enter media queries—this will be the subject of our next chapter.