Hi Everybody,
To get started we can take a look at a very simple example.

To make it easier to read on a phone I have decided to linearized the entire design making it all one column, and also to make the header area much smaller so readers don’t need to scroll past the header before getting to any content.
The first way to use media queries is to have the alternate section of CSS right inside your single style-sheet. So to target small devices we can use the following syntax :

1
@media only screen and (max-device-width: 480px) {
2

3
}

We can then add our alternate CSS for small screen and width devices inside the curly braces. By using the cascade we can simply overwrite any styles rules we set for desktop browsers earlier in our CSS. As long as this section comes last in your CSS it will overwrite the previous rules. So, to linearized our layout and use a smaller header graphic I can add the following :

01
@media only screen and (max-device-width: 480px) {
02
div#wrapper {
03
width: 400px;
04
}
05

06
div#header {
07
background-image: url(media-queries-phone.jpg);
08
height: 93px;
09
position: relative;
10
}
11

12
div#header h1 {
13
font-size: 140%;
14
}
15

16
#content {
17
float: none;
18
width: 100%;
19
}
20

21
#navigation {
22
float:none;
23
width: auto;
24
}
25
}

In the code above I am using an alternate background image and reducing the height of the header, then setting the content and navigation to float none and overwriting the width set earlier in the style-sheet. These rules only come into play on a small screen device.