CSS3 multimedia query

CSS2 multimedia type

@media are described 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, and so on.

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

CSS3 multimedia query

CSS3's multimedia queries inherit all the ideas of CSS2's 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:

  • The width and height of the viewport (window).
  • The width and height of the device
  • Facing (smartphone horizontal, vertical).
  • Resolution

At present, many for Apple phones, Android phones, tablets and other devices will use multimedia queries.

Browser support

The numbers in the table support the version number of the first browser for this property.

Property
@media 21.0 9.0 3.5 4.0 9.0

Multimedia query syntax

A multimedia query consists of multiple media and can contain one or more expressions that return true or false depending on whether the condition is true or false. 

@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 displays the specified style effect on the matching device.

Unless you use the not or only operator, all styles will fit on all devices.

  • not: Not is used to exclude certain devices, such as @media not print (non-printed devices).

  • only: Used to determine a particular type of media. F or Mobile devices that support Media Queries, if there is an only keyword, the mobile device's web browser ignores the only keyword and applies the style file directly to subsequent expressions. For devices that do not support Media Queries but are able to read Media Type-type Web browsers, this style file is 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 Describe
all For all multimedia types of devices
print For printers
screen For computer screens, tablets, smartphones, etc.
speech For screen readers

A simple example of a multimedia query

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

In the following example, the background color is modified on devices with a screen visual window size greater than 480 pixels:

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

Try it out . . .

The following example floats the menu to the left side of the page when the screen visual window size is greater than 480 pixels:

@media screen and (min-width: 480px) {
#leftsidebar { width: 200px; /b12> float: left; }
#main { margin-left: 216px; }
}

Try it out . . .

CSS3 @media reference

More multimedia queries can be @media rules.