Media - CSS Quick Syntax Reference Guide - page 100

Responsive design guidelines
When designing a responsive layout, it is often easiest to start with the mobile layout first
and define how it looks without any media rules. As you expand the viewport, notice
when this layout ceases to look good. This is the breakpoint at which you should change
the part of the layout that visually breaks or ceases to be useful. This change might
include adding a second column or changing to a more advanced navigation menu. You
define these breakpoints using the min-width and max-width media features to override
styles as the viewport gets larger, as shown in the following example. Continue this
method of finding breakpoints until you reach a high enough resolution. Depending on
your layout, you might need to define only a few breakpoints.
@media (min-width: 800px) {
body { background: red; }
}
@media (min-width: 401px) and (max-width: 799px) {
body { background: green; }
}
@media (max-width: 400px) {
body { background: blue; }
}