Media Queries and Container Queries

This chapter will look in detail at CSS media queries, hopefully providing all that’s needed to fully understand their capability, syntax, and future development.

At the end of this chapter, we will also look at container queries. As this chapter is written in mid- 2022, there are only experimental versions available of container queries in some browsers, which I wouldn’t typically cover. However, we shall enjoy an exception here. Container queries are likely to be a very significant addition to the web platform. As such, we will take a whistle-stop tour of the current implementations and consider some of the considerable possibilities they promise. But, to begin with, let’s understand everything we need to know about media queries.

We ended the last chapter with the initial markup for the rwd.education website. It wasn’t necessarily the final markup, but it was solid enough for us to start working with. For...