CSS | media queries

Media query is used to create responsive web design. It means that the view of web page differ from system to system based on screen or media types.
Media queries can be used to check many things:

  • width and height of viewport
  • width and height of device
  • Orientation
  • Resolution

A media query consist of a media type that can contain one or more expression which can be either true or false . The result of the query is true if the specified media matches the type of device the document is displayed on. If the media query is true then style sheet is applied.

Syntax:

@media not | only mediatype and (expression) {
    // Code content
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>CSS media query</title>
        <style>
            body {
                text-align:center;
            }
            .gfg {
                font-size:40px;
                font-weight:bold;
                color:green;
            }
            @media screen and (max-width:800px) {
                body {
                    text-align:center;
                    background-color:green;
                }
                .gfg {
                    font-size:30px;
                    font-weight:bold;
                    color:white;
                }
                .geeks {
                    color:white;
                }
            }
            @media screen and (max-width:500px) {
                body {
                    text-align:center;
                    background-color:blue;
                
            }
        </style>
    </head>
    <body>
        <div class = "gfg">GeeksforGeeks</div>
        <div class = "geeks">A computer science portal for geeks</div>
    </body>
</html>                    

chevron_right


Output:
css media query

Media Types in CSS: There are many types of media types which are listed below:

  • all: It is used for all media devices
  • print: It is used for printer.
  • screen: It is used for computer screen, smartphone, etc.
  • speech: It is used for screen readers that read the screen loud.

Features of Media query: There are many features of media query which are listed below:

  • color: The number of bits per color component for output device.
  • grid: Checks whether the device is grid or bitmap.
  • height: The viewport height.
  • aspect ratio: The ratio between width and height of viewport.
  • color-index: The number of colors the device can display.
  • max-resolution: The maximum resolution of the device using dpi and dpcm.
  • monochrome: The number of bits per color on a monochrome device.
  • scan: The scanning of output devices.
  • update: How quickly can output device modify.
  • width: The viewport width.

Supported Browsers: The browser supported by CSS media query are listed below:

  • Chrome 21.0 and above
  • Mozilla 3.5 and above
  • Opera 9.0 and above
  • Internet Explorer 9.0 and above
  • Safari 4.0 and above


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.