Responding to Page Width with Media Queries

Media queries allow us to apply specific style rules only when certain criteria are met. For example, we can detect to width of the browser window and change the layout.

Here is a rule which will make the page background red, but only when the browser is viewed at iPhone width.

@media screen and (max-width: 640px) {
  body {
    background: red;
  }
}

Linearising a layout

We can use media queries to linearise a design when the page width drops below a threshold. Take the following simple HTML page:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>

    <article></article>
    <aside></aside>

  </body>
</html>

We can create a simple two column float layout like this:

article {
  float:left;
  width:60%;
}

aside {
  float:right;
  width:30%;
}

Now we add a media query which simply unsets the float and width, like so:

@media screen and (max-width: 640px) {
  article,aside {
    float:none;
    width:auto;
  }
}

Where to break

The choice of breakpoint will depend on your content. Trying to optimise for particular devices is a losing battle. Here are some breaks you might want to consider:

widescreen: 1500px;
desktop: 960px;
ipad: 768px;
iphone portrait: 480px;

Meta Viewport

Now we have a problem. Mobile browsers have pinch to zoom, and so the actual size of a pixel is not the same as a physical pixel. An iPhone will report twice as many pixels as it actually has, which will make a web page initially appear zoomed out.

To turn on our responsive design, you must include a metatag in your header to tell the browser to render the CSS using the device's actual width.

The Meta Viewport tag looks like this:

<meta name='viewport' content='width=device-width, initial-scale=1' />

Pop this in your header to see the responsive design.

Exercise - Unset a float

Create a simple two column float layout with an article and an aside.
Now insert a media query into your page which unfloats the article and the aside, and sets width auto at width 640 (iPhone).
Resize your browser. Wow, you have a responsive design!

Further Exercise - Two Breaks

Add a third column.
Add another media query that responds at 1000px. The aim is to convert the 3 column layout into a 2 column layout at 1000px, then convert it into a one column layout at 640px.