CSS3 Media Queries

CSS3 media queries includes different style rules for different sizes of device. You can use one styles for mobiles, one for laptop, one for large monitor etc.

Here is an example of using media queries. The following example change the background color if the screen size is 480 pixels wide or wider:

Example:

@media screen and (min-width: 740px) {
body {
background-color: lightblue;
}
}

Run Example

Browser Support

Property Firefox Chrome IE Opera Safari
@media 3.5 21.0 9.0 9.0 4.0