CSS3 Media Queries

CSS2 Media Types

The @media rule was introduced in CSS2, allowing different style rules for different media types.

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

However, these media types are not well supported on many devices.

CSS3 Media Queries

CSS3 media queries inherit all the ideas of CSS2 media types: Instead of looking up the device type, CSS3 adapts the display based on settings.

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

• viewport width and height
• device width and height
• orientation (landscape or portrait on smartphones).
• resolution

Media queries are currently used for many devices such as iPhones, Android phones, tablets, etc.

Browser Support

The numbers in the table represent the first browser version that supports the property.

Media Query Syntax

Media queries consist of various media types and can include one or more expressions, which return true or false based on the conditions.

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

If the specified media type matches the device type, the query returns true, and the document will display the specified style effects on the matching device.

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

-

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

-

only: used to define a specific media type. For mobile devices that support Media Queries, if the only keyword exists, the mobile web browser will ignore the only keyword and directly apply the style sheet based on the expressions. For web browsers that do not support Media Queries but can read Media Type, they will ignore the style sheet when encountering the only keyword.

-

all: all devices, this is commonly seen.

You can also use different style sheets for different media:

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

CSS3 Media Types

Simple Media Query Example

Using media queries, you can apply specific styles on specified devices instead of the original styles.

The following example changes the background color on devices with a screen viewport size less than 480 pixels:

Example

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

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

Example

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

The following example hides the div element when the screen viewport size is less than 600 pixels:

Example

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

CSS3 @media Reference

For more media query content, refer to the @media rule.