Understanding media queries

Media queries have been around since HTML4 and CSS2. Originally, the CSS media attribute was used to specify a different stylesheet to be loaded based on the media type loading the page, such as screen, TV, projection, or handheld. In HTML5, media queries also allow for expressions that check for other properties of the user agent viewing the document such as viewport width, height, resolution, and so on.

A media query is made up of two parts, namely a media type declaration and one or more expressions that evaluate to either true or false. Any CSS rules contained nested within the media query declaration are applied whenever any of the media query expressions evaluate to true. Alternatively, every CSS rule inside a stylesheet referenced by a link tag whose media attribute contains a truthy media query expression is applied to the specified media type.

// ---------------------------------
// Media queries on the HTML file
// ---------------------------------
&lt...