Open In App

CSS @media Rule

Improve
Improve
Like Article
Like
Save
Share
Report

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>


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


Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads