CSS Property @media
@media query allows us to write
different CSS code for different media types or
different features on the same media.
CSS Syntax
@media mediatype and|not|only (media feature) {
CSS-Code;
}
We can set different stylesheets for different media:
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="my.css">
Media Types
- all
- for all media type
- aural
- Deprecated. for speech and sound synthesizers
- braille
- Deprecated. for braille feedback devices
- embossed
- Deprecated. for paged braille printers
- handheld
- Deprecated. for small or handheld devices
- for printers
- projection
- Deprecated. for projected presentations
- screen
- Used for computer screens
- speech
- for screenreaders
- tty
- Deprecated. for teletypes and terminals
- tv
- Deprecated. for television
Media Features
- aspect-ratio
- ratio between the width and the height of the display
- color
- the number of bits per color
- color-index
- the number of colors the device can support
- device-aspect-ratio
- the ratio between the width and the height of the device
- device-height
- the height of the screen or page
- device-width
- the width of the screen or page
- grid
- Determines whether the output device is a grid device or a bitmap device.
- height
- the height of the display area
- max-aspect-ratio
- the minimum ratio between the width and the height of the display area
- max-color
- the maximum number of bits per color
- max-color-index
- the maximum number of colors the device can support
- max-device-aspect-ratio
- the minimum ratio between the width and the height of the device
- max-device-height
- the maximum height of screen or paper
- max-device-width
- the maximum width of screen or paper
- max-height
- the maximum height of the display area
- max-monochrome
- the maximum number of bits per color on a greyscale device
- max-resolution
- the maximum resolution of the device, using dpi or dpcm
- max-width
- the maximum width of the display area
- min-aspect-ratio
- the minimum ratio between the width and the height of the display area
- min-color
- the minimum number of bits per color for the device
- min-color-index
- the minimum number of colors the device can support
- min-device-aspect-ratio
- the minimum ratio between the width and the height of the device
- min-device-width
- the minimum width of the screen or paper
- min-device-height
- the minimum height of the screen or paper
- min-height
- the minimum height of the display area
- min-monochrome
- the minimum number of bits per color on a greyscale device
- min-resolution
- the minimum resolution of the device, using dpi or dpcm
- min-width
- the minimum width of the display area
- monochrome
- the number of bits per color on a greyscale device
- orientation
- in landscape mode or portrait mode
- resolution
- the resolution of the device, using dpi or dpcm
- scan
- progressive or interlaca scanning of a television
- width
- the width of the display area
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
@media |
Yes | 9.0 | Yes | Yes | Yes |
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {<!-- w w w. j a va 2 s . com-->
background-color:lightgreen;
}
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browser window.
</p>
</body>
</html>