# CSS3 @media Query

## Example

Change the background-color if the document is smaller than 300 pixels wide:

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

More "Try it Yourself" examples below.

## Definition and Usage

With a @media query, you can write different CSS code for different media types.

This helps when you want different layout for different media types such as a screen or a printer, but also when you want different layout for different devices, which is very useful when making web pages with responsive design.

You can also have different layout when a user resizes the browser window up or down to a certain width, or height.

## Browser Support

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

Rule |  |  |  |  |
--- | --- | --- | --- | --- | ---
@media | 21 | 9 | 3.5 | 4.0 | 9

## CSS Syntax

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

You can also have different stylesheets for different media:

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

## Media Types

Value | Description
--- | ---
all | Used for all media type devices
aural | Deprecated. Used for speech and sound synthesizers
braille | Deprecated. Used for braille tactile feedback devices
embossed | Deprecated. Used for paged braille printers
handheld | Deprecated. Used for small or handheld devices
print | Used for printers
projection | Deprecated. Used for projected presentations, like slides
screen | Used for computer screens, tablets, smart-phones etc.
speech | Used for screenreaders that "reads" the page out loud
tty | Deprecated. Used for media using a fixed-pitch character grid, like teletypes and terminals
tv | Deprecated. Used for television-type devices

## Media Features

Value | Description
--- | ---
aspect-ratio | Specifies the ratio between the width and the height of the display area
color | Specifies the number of bits per color component for the output device
color-index | Specifies the number of colors the device can display
device-aspect-ratio | Specifies the ratio between the width and the height of the device
device-height | Specifies the height of the device, such as a computer screen
device-width | Specifies the width of the device, such as a computer screen
grid | Specifies whether the device is a grid device or not
height | Specifies the height of the display area, such as a browser window
max-aspect-ratio | Specifies the minimum ratio between the width and the height of the display area
max-color | Specifies the maximum number of bits per color component for the output device
max-color-index | Specifies the maximum number of colors the device can display
max-device-aspect-ratio | Specifies the minimum ratio between the width and the height of the device
max-device-height | Specifies the maximum height of the device, such as a computer screen
max-device-width | Specifies the maximum width of the device, such as a computer screen
max-height | Specifies the maximum height of the display area, such as a browser window
max-monochrome | Specifies the maximum number of bits per "color" on a monochrome (greyscale) device
max-resolution | Specifies the maximum resolution of the device, using dpi or dpcm
max-width | Specifies the maximum width of the display area, such as a browser window
min-aspect-ratio | Specifies the minimum ratio between the width and the height of the display area
min-color | Specifies the minimum number of bits per color component for the output device
min-color-index | Specifies the minimum number of colors the device can display
min-device-aspect-ratio | Specifies the minimum ratio between the width and the height of the device
min-device-width | Specifies the minimum width of the device, such as a computer screen
min-device-height | Specifies the minimum height of the device, such as a computer screen
min-height | Specifies the minimum height of the display area, such as a browser window
min-monochrome | Specifies the minimum number of bits per "color" on a monochrome (greyscale) device
min-resolution | Specifies the minimum resolution of the device, using dpi or dpcm
min-width | Specifies the minimum width of the display area, such as a browser window
monochrome | Specifies the number of bits per "color" on a monochrome (greyscale) device
orientation | Specifies the whether the display is in landscape mode or portrait mode
resolution | Specifies the resolution of the device, using dpi or dpcm
scan | Specifies progressive or interlaca scanning of a television
width | Specifies the width of the display area, such as a browser window

## More Examples

## Example

Using @media query to make responsive design:

@media only screen and (max-width: 500px) {
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}
Try it yourself »

## Related Pages

CSS tutorial: CSS Media Types

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples