Why media queries are needed for a responsive web design

If you head over to the W3C specification of the CSS3 Media Queries module (https://www.w3.org/TR/mediaqueries-3/), you’ll see that this is their official introduction to what media queries are all about:

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

While a fluid layout, created with percentages rather than fixed widths, can carry a design a substantial distance (we cover fluid layouts in full in the next chapter), given the gamut of screen sizes we have to cover, there are times when we need to revise the layout more substantially. Media queries make this possible—...