Summary
In this chapter, we've learned what media queries are, why we need them, and how to include them in our CSS files. We've also learned how to use the viewport meta
tag to make browsers render pages in the manner we'd like.
Don't worry about trying to memorize the syntax of media queries. Just get an understanding of the underlying principles and you can look up the syntax anytime; after all, that's what all developers do! As long as you understand what you can accomplish with media queries, our work here is largely done.
Back in Chapter 1, The Essentials of Responsive Web Design we noted that the three tenets of responsive web design are media queries, flexible layouts, and flexible media. We're three chapters in and we've only covered media queries! We're going to put that right in the next chapter.
In Chapter 4, Fluid Layout, Flexbox, and Responsive Images, we are going to take a deep dive into fluid layouts...