8Grids & columns

This section is just for information; the max-width media query discussed in the previous section is pretty much the only media query we use. This section expands on what we’ve used so far and shows how to do different things with media queries.

Let’s look again at the media query syntax shown in Figure 8.15 and reproduced below:

Figure 8.23   media query rule structure

The first thing is the mediatype is entirely optional, if you miss it out it defaults to all.

@media all and (max-width: 520px) { ... }

Is identical to:

@media (max-width: 520px) { ... }

The second thing is you can test multiple features in a single query:

@media (max-width: 520px) and (orientation: portrait) { ... }

Here, the expression is true if the screen is 520px or less wide AND its orientation is portrait.

Media queries have the following logical operators:

• AND

• OR (comma separated list)

• NOT

• ONLY

Taking these in turn:

This combines multiple features and they must all be true if the declaration block at the end is to be executed.

@media screen and (max-width: 520px) and (orientation: portrait) { ... }

In this example, the mediatype must be screen AND its width must be ≤520px AND its orientation must be portrait before the rules in the declaration block are executed.

There is no OR keyword, the OR function is achieved by separating features with a comma. Like this;

@media (max-width: 520px), (orientation: portrait) { ... }

Here the declaration block would execute if either the screen width was ≤520px OR the orientation was portrait. Only one condition has to be true to execute the declaration block. If both conditions are true, it will still execute (it is not an exclusive OR function).

The NOT operator is really confusing; I recommend you don’t use it.

The NOT function inverts the result of a media query; if the query were false, then applying the NOT would invert this and make it true.

The problem with the NOT operator is that it has to include a mediatype as well as a feature, it can’t be just applied to a feature.

To see this let’s use the previous rg-span examples and make it so that the text colour of the central column (the rg-span3-5 class) goes white if the screen is wider than 520px. Add the following media query:

@media not all and (max-width: 520px) {.rg-span3-5 {color:#fff;}}

The NOT operator requires a mediatype so I’ve put the all in the query. The all condition is always true (essentially it means any device) and normally the max-width feature would be true if the screen were ≤520px. By using the not operator, we’ve inverted this function so that it will be false if the screen ≤520px and true if it is >520px.

The NOT encompasses the whole media query, read it like this:

@media not [all and (max-width: 520px)] { ... }

Do not read it like this:

@media [not all] and (max-width: 520px) { ... }

My best advice for using NOT, is to find some other way.

• If you changed any of this code in grid.css, DELETE IT. We don’t want the text to change colour.

This is another funny one, I know I’ve used it in the grid.css file but I’m not sure it’s necessary.

The ONLY operator is one of those browser compatibility thing, it stops older browsers that don’t support the features bit of media queries, it forces these older browsers to ignore the media query altogether.

I’m not sure it is really a logical operator.

It is perfectly possible to combine logical operators, this is usually the AND and OR operators:

@media (orientation: landscape), (max-width: 520px) and 
(orientation: portrait) { ... }

Here, the declaration block is executed if:

• The orientation is landscape

or

• The width ≤520px AND the orientation is portrait

This is the formal list of media features that can be tested with media queries:

“Hang on a minute” you’re thinking—“where’s max-width? We’ve used it and it’s not in the list”.

We’ll no, there is no max-width, there is only width; max (and min) are qualifiers that we can apply to the features, it works like this:

* Test the viewport window for exact width */
@media (width: 520px) { ... }            /* executes if window is exactly 520px wide */

/* Test the viewport window is at least as wide as a value */
@media (min-width: 520px) { ... }        /* executes if window is ≥520px wide */

/* Test the viewport window is no wider than a value */
@media (max-width: 520px) { ... }        /* executes if window is ≤520px wide */

Max and min work with most features that can return a number, the following are all valid:

/* Aspect ratio — detect if browser is square or landscape*/
@media (min-aspect-ratio: 1/1) { ... }   /* executes if aspect ratio 1/1 or more */

/* Monochrome — test for low quality */
@media (max-monochrome: 8) { ... }       /* executes if output is 8 bits per pixel or less */

/* Resolution — check for low resolution */
@media (max-resolution: 150dpi) { ... }  /* executes if res is 150dpi or less */

A note on usage:

If you use MAX, the result is TRUE if the returned number is LESS THAN OR EQUAL TO the given value.

If you use MIN, the result is TRUE if the returned number is MORE THAN OR EQUAL TO the given value.

What I describe here is a useful technique rather than something new about media queries, but it is something we will use a lot when making the website responsive.

In the column example in the previous section, the columns became progressively narrower as the browser window narrowed, but they kept their correct proportions to one another.

What didn’t happen was any change to the font size; the visible text just stayed the same size all the way through. Now I’m going to look at how I change the font-size responsively for the website in great detail in the following section, but I want to explain the concept of how it’s done here—it’s all to do with media queries you see, and we have a nice little test example already set up.

Imagine that as we narrow the browser window, we want to change the text colour of the outside columns (I’m changing text colour rather than font size because it is more noticeable, but the principle is the same). Let’s say we want it to do this:

Each point at which the colour changes (1000 px, 800 px & 600 px) is called a breakpoint. This is common terminology when talking about responsive design, it just means a screen width that when reached changes something.

There is a fairly standard way of doing this, add the following code to the end of grid.css.

@media all {.rg-span1-5 { color: #000; }}
@media all and (max-width:1000px) {.rg-span1-5 { color: #ff0000; }}
@media all and (max-width:800px)  {.rg-span1-5 { color: #fff; }}
@media all and (max-width:600px)  {.rg-span1-5 { color: #00ff00; }}

The first line is a bit different to what we’ve seen before:

@media all {.rg-span1-5 { color: #000; }}

For a start there is no feature component and with the mediatype being set to all, the result is always true, it will always set the rg-span1-5 text colour to black (#000) no matter what.

Now let’s suppose that the browser is 1200 px wide, the first media query will execute (it is always true) and the rg-span1-5 text colour will be black. The next media query is testing for the browser width to be 1000 px or less (just like the media queries we used setting the column widths in the previous section). The browser window is 1200 px so the result of this media query is false and its CSS code does not execute (it does not change the colour).

The same is true of the last two media queries; these are both looking for progressively smaller widths and both are false.

So the only media query that is active is the first one making the text black.

Now let’s reduce the browser width to 900 px (in the middle of the red band):

Once again the first media query is true and the text goes black, but now the browser is less than 1000 px wide, so the second media query is also true and this turns the text red; the final two remain false.

We now have two media queries that are true and they are both changing the text colour (this is the cascading thing again), the second media query wins because it was the last one to be executed—so the text goes red.

You can see how this is going I’m sure.

If we reduce the browser width further, to 700 px, the first three media queries are true, they all try to change the colour, but the last one has priority (just because it is the last active query in the list) and the text goes white.

Finally, at a width of 600 px or less, all the media queries are true, this time it is the fourth media query that executes last and therefore has priority and the text goes green. The following figures show all the combinations (you can see the true browser width in each case in the indication box, showing over the blue column):

Figure 8.24   Breakpoint demonstration—browser >1000 px wide

Figure 8.25   Breakpoint demonstration—browser 801-1000 px wide

Figure 8.26   Breakpoint demonstration—browser 601-800 px wide

Figure 8.27   Breakpoint demonstration—browser ≤600 px wide

A note about the first media query:

@media all {.rg-span1-5 { color: #000; }}

This media query is always true; it would be perfectly possible to replace it with:

.rg-span1-5 { color: #000; }

Or just add the color: property to the existing rg-span1-5 class—it would work just the same.

For some reason the first method (adding it to an always true media query) seems to be the preferred way.

I also prefer this way, but only because it keeps all the responsive bits together—I know where to look if I want to change something.

Now if you changed any of this code in grid.css, DELETE IT. We don’t want the text to change colour.