Thursday

Media queries are lines of CSS that poll the end-user's display to see the width and height of the viewport. Although many professional developers add HTML in the ‹head› element of their Web pages to load a stylesheet specific to the viewport, we're not going to get that fancy. We're just going to code our CSS so that the first run-through of the code presumes a typical desktop monitor display, then we'll add in a media query to trigger a subset of CSS in the event that the display is a little narrower - like that found on tablets in a vertical orientation - and then a second media query after that to trigger yet another subset of CSS tailored for smartphone displays.

The generic syntax for a CSS media query is as follows:
 @media not|only mediatype and (expressions) {}

In our case, the "not|only" part of the code will simply reference "only screen" because we want the query to trigger if the screen meets requirements specified in the expressions part. We're going to set it for "max-width" and we'll have to play around with some values to see what works best.