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