CSS @media Rule (original) (raw)

Last Updated : 8 Jun, 2026

The @media CSS at-rule applies styles based on device characteristics like width, height, resolution, or orientation, enabling responsive and optimized designs.

• Used to create responsive layouts for different devices like smartphones, tablets, or desktops.
• Can target styles for print or screen readers to enhance accessibility.

**Syntax:

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

Used Keywords

Media query keywords like not, only, and and help control how and when CSS rules are applied based on device types or features.

• **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 specify which devices or media the CSS rules should target, allowing tailored styles for different outputs.

• **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.

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: grid 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 min-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 min-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: The @media rule applies styles only when the specified media query matches the device’s characteristics.

HTML `

<style>
    @media screen and (max-width: 600px) {

        h1,
        h2 {
            color: green;
            font-size: 25px;
        }

        p {
            background-color: green;
            color: white;
        }
    }
</style>

GeeksforGeeks

CSS @media rule

GeeksforGeeks: A computer science portal

`

**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.