CSS3 @media Rule


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

The @media rule is used to define different style rules for different media types/devices.

In CSS2 this was called media types, while in CSS3 it is called media queries.

Media queries look at the capability of the device, and can be used to check many things, such as:

  • width and height of the browser window
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution
  • and much more

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

Examples

More Examples

Example

Use the @media rule 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



SHARE THIS PAGE

COLOR PICKER

colorpicker





Search w3schools.com:

Translate w3schools.com: