Latest web development tutorials

CSS3 Media Queries

CSS2 media types

@media rule is described in CSS2, and can be customized for different media types different style rules.

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

But these types of multimedia support on many devices still friendly enough.

CSS3 Media Queries

CSS3 multimedia query inherits all thought CSS2 media types: Instead of finding the type of equipment, CSS3 display settings according to adaptation.

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

  • the viewport (windows) in width and height
  • Width and height of the apparatus
  • Toward (Smartphone horizontal screen, vertical screen).
  • Resolution

At present, many for the Apple phone, Android phone, tablet and other devices will be used to display the query.

Browser Support

Figures in the table represent the first browser to support the property version number.

Attributes
@media 21.0 9.0 3.5 4.0 9.0

Multimedia query syntax

Multimedia inquiry composed by a variety of media, can contain one or more expressions, expression is established according to the conditions returns true or false. 

@media not|only mediatype and (expressions) {
    CSS-Code;
}

If the specified media type matching device type, the query returns true, the document will show the effect of specified style in matching device.

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

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

  • only: to set some special media types.Support for Media Queries mobile devices, if there is only a keyword, Web browser for mobile devices will ignore the only keyword and expression after the application directly from the style file. For Media Queries when the device does not support the ability to read, but Media Type type of Web browser, keyword encountered only ignores this style file.

  • all: all devices, this should always see.

You can also use a different style files on different media:

CSS3 media types

value description
all Used for all types of multimedia devices
print For printers
screen For computer screens, tablets, smartphones.
speech For screen readers

Simple examples of multimedia inquiry

Using multimedia queries can be used to replace the original style corresponding to the style on the specified device.

The following examples change the background colors on the screen visible window size greater than 480 pixels equipment:

Examples

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

try it"

The following examples are visible in the screen window size larger than 480 pixels will float to the left menu page:

Examples

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

try it"

CSS3 @media reference

Discover more multimedia content can refer @media rules.