CSS @media Rule

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

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.

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: 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 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title> CSS @media rule </title>
<!--Driver Code Ends-->

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

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

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

<!--Driver Code Starts-->
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS @media rule</h2>
    <p>GeeksforGeeks: A computer science portal</p>
</body>
</html>
<!--Driver Code Ends-->

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.

Comment

Explore