CSS | @media Rule

The @media rule is used to apply a different set of styles for different Media/devices through the use of 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 the more optimized design for specific screen type or device i.e Mobile Phone, 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 type or media feature.

Media Types:

  • all: It is the default media type. It is used for all media type devices.
  • print: It is used for printer device.
  • screen: It is used for computer screen, mobile screen, … etc.
  • speech: It is used for screen readers that reads the page.

Media Features: There are many media features in Media Query some of them are listed below:

  • any-hover: Any avialable inputmechanism allow the user to hover over any element.
  • any-pointer: It defines that any available input mechanism 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 are to supported 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 defines weather the device is grid or bootmap.
  • height: It is used to set the height of viewport.
  • hover: It allows the user hover over any elements.
  • inverted-clors: This define 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 use to set the maximum number of bits per color components for output device.
  • max-color-index; It is used ti set the maximum number of colors that the device can display.
  • max-height: It sets the max height of browser display area.
  • max-monochrome: It is used to set 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 browser display area.
  • min-aspect-ratio: It is used to set the min ratio of width and height.
  • min-color: It is use to set the minimum number of bits per color components for output device.
  • min-color-index; It is used ti set the min number of colors that the device can display.
  • min-height: It sets the minimum height of browser display area.
  • max-monochrome: It is used to set 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 browser display area.
  • monchrome: 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 a pointing device.
  • resolution: It sets the resolution of the device using dpi or dpcm.
  • scan: It is ysed to do the scannig 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 viewport.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
When screen width more than 600px:

When screen width less then 600px:

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

  • Google Chrome 21.0
  • Internet Explorer 9.0
  • Firefox 3.5
  • Opera 9
  • Safari 4.0


My Personal Notes arrow_drop_up

Final Year Student Programming Enthusiast

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : GeekCode1



Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.