Skip to content
Related Articles

Related Articles

CSS media queries

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 03 Nov, 2021

The Media query in CSS is used to create a responsive web design. It means that the view of a web page differs from system to system based on screen or media types. The breakpoint specifies for what device-width size, the content is just starting to break or deform.

Media queries can be used to check many things:

  • width and height of the viewport
  • width and height of the 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 a style sheet is applied.

Syntax:

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

Example: This example illustrates the CSS media query with the different device-width for making it responsive.

HTML




<!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: From the output, we can see that if the max-width of the screen is reduced to 800px then the background color changes to green & if the max-width of the screen is reduced to 500px then the background color will turn to blue. For the desktop size width, the background color will be white.

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 screens, smartphones, etc.
  • speech: It is used for screen readers that read the screen aloud.

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

  • color: The number of bits per color component for the output device.
  • grid: Checks whether the device is grid or bitmap.
  • height: The viewport height.
  • aspect ratio: The ratio between width and height of the 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 the 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
  • Microsoft Edge 12.0
  • Opera 9.0 and above
  • Internet Explorer 9.0 and above
  • Safari 4.0 and above


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!