Responsive Design: Introduction


When a device like an iPhone views a typical webpage, it makes certain assumptions about that page. The most important of these is that it assumes the page is fit within a 960px width. Then it scales the design down so that page (more-or-less) fits within the device’s viewing area.

This is a good thing, as it makes a wide range of pages, typically designed for large desktop viewing areas, viewable on the restricted screen sizes of mobile devices.

However, we can actually deliver different CSS depending on the characteristics of the device. To do that we need to use css media queries in combination with the viewport meta-tag.

The Viewport Meta-tag

If you add one line of code inside the <head> area of your html documents, you can prevent this default scaling performed by the device.

<meta name= “viewport” content= “width=device-width, initial-scale=1” >

This will instruct most modern mobile browsers to not scale down.

There a number of additional attributes that can be used with this meta-tag, but this basic invocation is typically all you will need.

For further information, consult this nettuts tutorial. 

Media Queries

In combination with the viewport meta-tag, CSS Media Queries are what allow us to direct different CSS to a range of device sizes, orientations, color capabilities, etc.

Here’s one way to do it.

At the end of your main stylesheet, add the following:
@media screen and (max-width: 320px) {

} /* End 320 orientation */


In the space between the opening and closing curly brace, you can target styles to (in above example) the iPhone in portrait orientation. For example, look at the following code.

@media screen and (max-width: 320px){

body {
width: 95%;
margin: auto;

h1 {
font-size: 2em;

nav li{
width: 25%;

}  /* end 320 */

In this example, I might have needed to change the width of the body (to 95% of the viewing area), the size of the header font (for display on a smaller screen), and the width of list items used in a nav element.

This last change, to the width of the li, is a common responsive technique. Imagine that I have 12 floated list items working as a menu across the top of the page in the desktop layout.

On a phone, those buttons would be very small. Sizing them up like this will cause them to reflow so that there would be three rows of buttons rather than one.

Naturally, you can target other dimensions and orientations:


@media screen and (max-width: 480px){

}   /* end iphone landscape orientation */


@media screen and (max-width: 768px){

}   /* end ipad portrait orientation */


@media screen and (max-width: 1024px){

}   /* end ipad landscape orientation */