O'Reilly logo

Responsive Web Design with HTML5 and CSS3 by Ben Frain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required