3
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 ...
Get Responsive Web Design with HTML5 and CSS - Third Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
