CSS3 multimedia query

CSS2 multimedia type

@media rules 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, 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 displays adaptively according toits settings.

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

• Width and height of viewport (window)

• Width and height of the equipment

• Facing (smartphone horizontal screen, vertical screen).

• Resolution

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

Browser support

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

Multimedia query syntax

A multimedia query consists of multiple media and can contain one or more expressions, which are returned according to whether the condition is true or not true or false .

@medianot\|onlymediatypeand(expressions){CSS code...;}

If the specified multimedia type matches the device type, the query result is returned. The true document displays the effect of the specified style on the matching device

Unless you use not or only operator, otherwise all styles will be adapted to display on all devices.

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

• only :Used to determine a particular type of media. For mobile devices that support Media Queries, if there is only keyword, the Web browser of the mobile device ignores the only keyword and apply the style file directly based on the following expression. For Web browsers that do not support Media Queries but can read Media Type types, encountered only keyword, this style file is ignored.

• all : all the equipment, this should be seen frequently.

You can also use different style files on different media:

<linkrel="stylesheet"media="mediatypeand\|not\|only(expressions)"href="print.css">

CSS3 multimedia type

A simple example of multimedia query

Using multimedia queries, you can replace the original style with the corresponding style on the specified device.

The following example modifies the background color on a device with a screen visual window size of less than 480 pixels:

Example

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

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

Example

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

The following example sets the screen visual window when the size is less than 600 pixels div element hiding:

Example

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

CSS3 @media reference

For more multimedia queries, please refer to @media rules.