WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Media Queries


CSS2 multimedia type

@media rules are introduced in CSS2, and different style rules can be customized for different media types.

For example: you can set different style rules for different media types (including monitors, portable devices, televisions, etc.).

But these multimedia types are not friendly enough to support on many devices.


CSS3 multimedia query

CSS3's multimedia query inherits all the ideas of CSS2 multimedia type: Instead of finding the type of device, CSS3 adaptively displays according to the settings.

Media queries can be used to detect many things, such as:

  • Viewport width and height
  • Width and height of the device
  • Orientation (smartphone landscape, portrait).
  • Resolution

At present, many devices such as Apple phones, Android phones, and tablets will use multimedia queries.


Browser Support

The number in the table indicates the version number of the first browser that supports this property.

Property
@media 21.0 12.0 9.0 3.5 4.0 9.0

Media Query Syntax

Multimedia queries consist of multiple media and can contain one or more expressions that return true or false depending on whether the condition is true.

@ media not | only mediatype and ( expressions ) { CSS code ...; }
If the specified multimedia type matches the device type, the query result returns true, and the document will display the specified style effect on the matched device.

Unless you use the not or only operators, all styles will adapt to display on all devices.

  • not: not is used to exclude some specific devices, such as @media not print.

  • only: is used to specify a particular media type. For mobile devices that support Media Queries, if the only keyword is present, the mobile device's web browser ignores the only keyword and applies the style file directly based on the following expression. For web browsers that do not support Media Queries but can read Media Type, this style file will be ignored when encountering the only keyword.

  • all: All devices, this should be seen often.

You can also use different style files on different media:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">


CSS3 multimedia type

value Description
all For all multimedia devices
print For printers
screen For computer screen, tablet, smartphone, etc.
speech For screen readers

A simple example of multimedia query

Use multimedia query to replace the original style with the corresponding style on the specified device.

In the following example, modify the background color on a device with a screen visible window larger than 480 pixels:

Example

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
Try it yourself »

The following example floats the menu to the left of the page when the screen visible window is larger than 480 pixels:

Example

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}
Try it yourself »

CSS3 @media Reference

More multimedia query content can refer to @media rule in our CSS reference.