-
Book Overview & Buying
-
Table Of Contents
Mastering PostCSS for Web Design
By :
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.
To get a feel for some of the more recent media queries...