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.

<!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>

Output: From the output, we can see when screen width resizes less than or equal to 600px then the text color also changes to green.

Supported Browsers: The browser supported by the @media rule are listed below:

• Google Chrome 1.0
• Internet Explorer 6.0
• Microsoft Edge 12
• Firefox 1
• Opera 9.2
• Safari 3.0