Tutorialspoint.dev

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:

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

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


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter