Media Queries – Supporting Differing Viewports

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. Where appropriate, we will use media queries to adjust the basic layout of our test site, adding relevant styles for wider screen sizes.

We ended the last chapter with a design for the https://rwd.education/ website. For the sake of this chapter, I have written some preliminary markup and added some corresponding basic "mobile" styles.

If you open the index.html file inside this chapter's start folder in a web browser, you will see that the design looks acceptable on devices with slim viewports, such as mobile phones:

Figure 3.1: The design looks fine at smaller viewports

However, it quickly starts to look a little stretched when you widen the browser window:

Figure 3.2: We definitely need to change the styles for...