CSS @media Rule

The @media CSS at-rule is used to apply a different set of styles for different media/devices using the Media Queries. A Media Query is mainly used to check the height, width, resolution, and orientation(Portrait/Landscape) of the device. This CSS rule is a way out for making more out of responsive design by delivering a more optimized design for a specific screen type or device i.e. smartphone, or PC. The media queries can also be used for specifying certain styles only for printed documents or for screen readers.

Syntax:

@media not|only mediatype and (media feature and|or|not mediafeature) 
{
    // CSS Property
}

Used Keywords:

not: It reverts the entire media query.
only: It prevents the older browser(unsupported browsers) from applying the specified styles.
and: It is used to combine two media types or media features.

Media Types:

all: It is the default media type. It is used for all media type devices.
print: It is used for printer devices.
screen: It is used for computer screens, mobile screens, etc.
speech: It is used for screen readers that read the page.

Media Features: There are many media features in Media Query some of them are listed below:

any-hover: Any available input mechanism allow the user to hover over any element.
any-pointer: It defines that any available input mechanism as a pointing device, and if so, how accurate is it?
any-ratio: It is used to set the ratio between width and height of the viewport.
color: It is used to set the color components of the output devices.
color-gamut: It is used to set the color range that is to support by the user agent or in output devices.
color-index: It is used to set the number of colors that the device can display.
grid: It is used to specify the size of rows and columns.
height: It is used to set the height of the viewport.
hover: It allows the user to hover over any elements.
inverted-colors: This defines does any device inverting colors
light-level: It defines the light level.
max-aspect-ratio: It is used to set the max ratio of width and height.
max-color: It is used to set the maximum number of bits per color component for an output device.
max-color-index; It is used to set the maximum number of colors that the device can display.
max-height: It sets the max height of the browser display area.
max-monochrome: It is used to set the maximum number of bits per “color” on a monochrome device.
max-resolution: It is used to set the max resolution of the output device.
max-width: It sets the max-width of the browser display area.
min-aspect-ratio: It is used to set the min ratio of width and height.
min-color: It is used to set the minimum number of bits per color component for an output device.
min-color-index; It is used to set the min number of colors that the device can display.
min-height: It sets the minimum height of the browser display area.
max-monochrome: It is used to set a maximum number of bits per “color” on a monochrome device.
min-resolution: It is used to set the min resolution of the output device.
min-width: It sets the minimum width of the browser display area.
monochrome: It is used to set the number of bits per “color” on a monochrome device.
orientation: It is used to set the orientation of the viewport that landscape or portrait.
overflow-block: It is used to control the situation when the content overflows the viewport.
overflow-inline: It is used to control the situation when the content overflows the viewport along the inline axis be scrolled.
pointer: It is a primary input mechanism for a pointing device.
resolution: It sets the resolution of the device using dpi or dpcm.
scan: It is used to do the scanning process of the output devices.
scripting: Is there any scripting available like JS.
update: It is used to update quickly update the output devices.
width: It is used to set the width of the viewport.

Example: This example illustrates the use of the @media rule to implement the various styling properties based on the result of one or more media queries. The @media rule will only work if the media query matches the device on which the content is being used.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> CSS @media rule </title>
    <style>
        @media screen and (max-width: 600px) {
 
            h1,
            h2 {
                color: green;
                font-size: 25px;
            }
 
            p {
                background-color: green;
                color: white;
            }
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS @media rule</h2>
    <p>GeeksforGeeks: A computer science portal</p>
</body>
</html>