CSS3 @mediaquery

Example

If the document width is less than 300 pixels, change the background color (background-color):

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

Definition and use

Using @media queries, you can define different styles for different media types.

@media can set different styles for different screen sizes, and is especially useful if you need to design responsive pages.

As you resize the browser, the page will also re-render according to the browser's width and height.

Browser Support

The numbers in the table indicate the first browser version that supports the @media rule.

Rules
@media	21	9	3.5	4.0	9

CSS Syntax

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

not, and, and only can be used to construct complex media queries. You can also combine multiple media queries into a single rule by separating them with commas.

Meanings of the not, only, and and keywords:

notThe not operator is used to negate a media query, returning true if this condition is not met, otherwise false. If it appears in a comma-separated list of queries, it only negates the specific query to which it is applied. If you use the not operator, you must also specify a media type.
onlyThe only operator is used to apply styles only when the entire query matches, and is useful for preventing older browsers from applying the selected styles. When only is not used, older browsers will interpret screen and (max-width: 500px) simply as screen, ignore the rest of the query, and apply its styles to all screens. If you use the only operator, you must also specify a media type.
,(Comma) Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is handled separately from the others. Therefore, if any query in the list is true, the entire media statement returns true. In other words, the list behaves like a logical or operator.
andThe and operator is used to combine multiple media query rules into a single media query. It returns true when each query rule is true. It is also used to combine media features with media types.

Media types describe the general category of a device. Unless the not or only logical operators are used, the media type is optional and defaults to the all type (implicitly).

You can also use different style files for different media:

<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css.html">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css.html">
....

Media Types

Value	Description
all	For all devices
aural	Deprecated. Used for speech and sound synthesizers.
braille	Deprecated. Applied to Braille touch feedback devices.
embossed	Deprecated. For Braille printing devices used for printing.
handheld	Deprecated. For handheld devices or smaller devices, such as PDAs and small phones.
print	Used for printers and print preview.
projection	Deprecated. Used for projection devices.
screen	For computer screens, tablets, smartphones, etc.
speech	Applied to sound-emitting devices such as screen readers.
tty	Deprecated. For fixed-character grids, such as telegraphs, terminal devices, and portable devices with limited characters.
tv	Deprecated. Used for televisions and internet TVs.

Media Features

Value	Description
aspect-ratio	Defines the ratio of the width to the height of the visible area of the page on the output device.
color	Defines the number of color components per group on the output device. If it is not a color device, the value is 0.
color-index	Defines the number of entries in the color lookup table of the output device. If no color lookup table is used, the value is 0.
device-aspect-ratio	Defines the ratio of the visible width to the height of the screen of the output device.
device-height	Defines the visible height of the output device's screen.
device-width	Defines the visible width of the output device's screen.
grid	Used to query whether the output device uses raster or dot matrix.
height	Defines the height of the visible area of the page on the output device.
max-aspect-ratio	Defines the maximum ratio of the visible width to the height of the screen of the output device.
max-color	Defines the maximum number of color components per group on the output device.
max-color-index	Defines the maximum number of entries in the color lookup table of the output device.
max-device-aspect-ratio	Defines the maximum ratio of the visible width to the height of the screen of the output device.
max-device-height	Defines the maximum visible height of the screen of the output device.
max-device-width	Defines the maximum visible width of the screen of the output device.
max-height	Defines the maximum visible area height of the page on the output device.
max-monochrome	Defines the maximum number of monochrome components per pixel in a monochrome frame buffer.
max-resolution	Defines the maximum resolution of the device.
max-width	Defines the maximum visible area width of the page on the output device.
min-aspect-ratio	Defines the minimum ratio of the width to the height of the visible area of the page on the output device.
min-color	Defines the minimum number of color components per group on the output device.
min-color-index	Defines the minimum number of entries in the color lookup table of the output device.
min-device-aspect-ratio	Defines the minimum ratio of the visible width to the height of the screen of the output device.
min-device-width	Defines the minimum visible width of the screen of the output device.
min-device-height	Defines the minimum visible height of the screen of the output device.
min-height	Defines the minimum visible area height of the page on the output device.
min-monochrome	Defines the minimum number of monochrome components per pixel in a monochrome frame buffer.
min-resolution	Defines the minimum resolution of the device.
min-width	Defines the minimum visible area width of the page on the output device.
monochrome	Defines the number of monochrome components per pixel in a monochrome frame buffer. If it is not a monochrome device, the value is 0.
orientation	Defines whether the height of the visible area of the page on the output device is greater than or equal to its width.
resolution	Defines the resolution of the device. E.g.: 96dpi, 300dpi, 118dpcm
scan	Defines the scanning process for television-type devices.
width	Defines the width of the visible area of the page on the output device.

More Examples

Example

Use @media queries to create responsive designs:

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}

Try it Yourself »

More Examples

CSS Media Queries for Various Device Sizes

CSS Tutorial:CSS Media Types

other extensions

CSS3 @mediaquery

Example

Definition and use

Browser Support

CSS Syntax

Media Types

Media Features

More Examples

Example

More Examples

Related Pages