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 through delivering a more optimized design for specific screen type or device i.e smartphone, 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>

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