Chapter 2: The Building Blocks of Responsive Design

There are two main building blocks at the heart of responsive web design: media queries and viewports.

Media queries represent the glue that joins a lot of other responsive concepts and tools together. They’re a simple but powerful concept, allowing you to detect device properties, define rules, and load different CSS properties based on them. For example, you can optimize a navigation menu for different devices, converting a full horizontal menu on desktop browsers to the “hamburger” menu often encountered on mobile devices.

Viewports are less complex, allowing you to define the size and scaling factor of a web page appropriately, no matter what the size of the device being used to view the ...

Get Jump Start Responsive Web Design, 2nd 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.