Open In App

CSS Media Queries

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

CSS media queries allows the styling of elements depending on the devices. It helps 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 breakpoints in @media specifies for what device-width size, the content is just starting to break or deform. The CSS2 rule introduced different style rules for different media types. Media queries can be used to check many things:

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

Media Types in CSS

There are many types of media types which are listed below:

Media Type Description
all It is used for all media devices.
print It is used for printers.
screen Used for computer screens, smartphones, etc.
speech Used for screen readers that read the screen aloud.

A media query consists of a media type that can contain one or more expressions that can be either true or false. The query’s result 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
}
@media screen and (min-width: 720px) {
  body {
    background-color: crimson;
  }
}
@media screen and (min-width: 720px) {
  #rightsidebar {width: 300px; float: right; height: 150px}
  #main {margin-right: 200px;}
}

This code snippet ensures that a menu will float to the left side of the page when the viewport is 720 pixels wide or wider. If the viewport is less than 720 pixels, the menu will be positioned on top of the content.

Example: This example demonstrates the implementation of the CSS media queries 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: The output shows the color change with respect to the defined screen width.

Media Query Features

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

Features Description
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 the 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:



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads