Media Queries

From smartphone screens to large desktops, responsive pages format content according to the viewport size.

This is done through media queries (introduced with CSS3) - querying a different style when a certain width of the screen has been reached.

There are two ways to use it:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px") href="smalldevice.css" />

another method is to include the conditions in your stylesheet:

body { background: #333; }

@media only screen and (max-device-width:480px) {
    body { background: #FFF; }
}

in the above example, the page background color will be a dark shade of gray when viewing on screen sizes larger than 480px. On the other hand, the background will be white when viewed with small devices such as phones with screen sizes 480px and below.

With these, one can now create multiple layouts for a page and content depending on the condition you pass it.

_

Check out the spec over at http://www.w3.org/TR/css3-mediaqueries/