Revisiting media queries

If you spend any time viewing sites on different devices, then it will hardly come as a surprise to see media queries in the style sheet—they form the basis for responsive design and declarations allow us to control what is displayed on screen, according to the available screen width.

The principles behind media queries are simple. In a nutshell, we have to define the device or media, and the resolution (or width) at which point the rule (or breakpoint) either kicks in or stops being applied. Take this simple example:

@media only screen and (max-width: 768px) {
  /* CSS Styles */
  ...
}

Any styles within will be applied only when we're viewing on screen, and our available screen estate is 768px or less. This is a simple example, they can be as simple or as complex as required; it's down to us as developers to work out exactly where our content breaks and to build a suitable breakpoint to manage the change.

Note

To get a feel for some of the more recent media queries that are possible, take a look at this post by Chris Coyier, who has queries for laptops, PCs, and even wearable devices! The list is available at https://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

Okay, let's make a start: PostCSS makes it easy to manage queries for both text and images; we'll begin our journey with a look at handling images.