CSS | @media Rule

The @media rule is used to apply 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:

  • height: It is used to set the height of viewport.
  • width: It is used to set the width of viewport.
  • resolution: It sets the resolution of the device using dpi or dpcm.
  • min-height: It sets the minimum height of browser display area.
  • min-width: It sets the minimum width of browser display area.
  • max-height: It sets the max height of browser display area.
  • max-width: It sets the max width of browser display area.

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
  • Safari 4.0
  • Opera 9


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.