- Responsive Web Design with HTML5 and CSS3
- Ben Frain
- 140字
- 2021-08-06 20:03:41
Chapter 2. Media Queries: Supporting Differing Viewports
As we noted in the last chapter, CSS3 consists of a number of bolt-on modules. Media queries is just one of these CSS3 modules. Media queries allow us to target specific CSS styles depending upon the display capabilities of a device. For example, with just a few lines of CSS we can change the way content displays based upon things such as viewport width, screen aspect ratio, orientation (landscape or portrait), and so on.
In this chapter, we shall:
- Learn why media queries are needed for a responsive web design
- Learn how a CSS3 media query is constructed
- Understand what device features we can test for
- Write our first CSS3 media query
- Target CSS style rules to specific viewports
- Learn how to make media queries work on iOS and Android devices