CSS provides an easy way to target browsers on different types of devices, or different uses. For example, the design you produce for a normal desktop browser may not be suitable for a handheld device, or a printer. These are known as media types. There are several media types, and most browsers will generally concentrate on just one or two, depending on what they are designed to be used for. Opera is by far the most versatile, and supports six different media types.

CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

Max Width
——————————————————————————-

@media screen and (max-width: 600px) {
.class {
background: #ddd;
}
}

Put the following line of code in between the tag. If you want to link to a separate stylesheet.

Min Width
——————————————————————————-

@media screen and (min-width: 900px) {
.class {
background: #999;
}
}

Multiple Media Queries
——————————————————————————-
Combining multiple media queries.
The below code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #444;
}
}

Device Width
——————————————————————————-
The below code will apply if the max-device-width is 480px (eg. iPhone display).
Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.

@media screen and (max-device-width: 480px) {
.class {
background: #f00;
}
}

For iPhone 4
——————————————————————————-
The stylesheet is for iPhone 4 specificly

For iPad
——————————————————————————-
You can also use media query to detect orientation on the iPad (portrait or landscapse)