CSS Media Query

Introduction

With the help of media in CSS, we can use media queries to apply different styles for different devices. With the help of a media query, we can also check the device's height, width, resolution, and orientation (Portrait/Landscape).

The main aim of the CSS rule is to make the webpage more responsive to deliver the optimized design for the different screen sizes. With the help of media queries, we can also specify the style for the screen readers.

Syntax:

We can write the media query with the help of the below syntax.

@media not|only media type and (media feature and|or|not media feature) 
{
    // CSS Property
}

Used Keywords

Below are some keywords that will be used while writing the media queries. These are as follows.

Note: With the help of this keyword, we can revert the entire media query.
Only: With the help of this keyword, we can prevent the old browser from applying the style property.
And: With the help of this keyword, we can combine two media features and media queries.

Media Types

There are different types of media available in the media query. These are as follows.

All: It is the default value for the media type. We can use this for all types of devices.
Print: We can use this for printer devices.
Screen: We can use this for the mobile or computer screen type, etc.
Speech: We can use this for the screen reader, which is used to read the screen.

Media Features

Many features are being used for the media query. These are as follows.

Any hover:

With the help of this, the user can hover over any element.

Any-pointer:

With the help of this feature, we can perform a mechanism that is used for pointing devices.

Any-ratio:

With the help of this, we can set the ratio between the width and height of the screen's viewport.

Color:

With the help of this, we can set the color for all the components of the output device.

Color-gamut:

With the help of this, we can set the range for the color component that the output devices or user agent supports.

Color-index:

With the help of this, we can set the number of colors to display to the user.

Grid:

With the help of this, we can specify the number of rows and columns to be displayed on the web page.

Height:

With the help of this, we can set the height of the viewport which is going to be displayed on the webpage.

Hover:

With the help of this, the user can hover over any element.

Inverted colors:

With the help of this, we can define the inverted colors for any of the devices.

Light level:

With the help of this, we can define the level of the lights.

max-aspect-ratio:

With this help, we can set the maximum height and width for displaying the viewport on the web page.

Max-color:

With the help of this, we can define the number of bits per color component that will be displayed on the webpage.

max-color-index:

With the help of this, we can define a maximum number of colors that the output devices can display.

Max-height:

With the help of this, we can set the maximum height for the display area of the browser.

Max-monochrome:

With the help of this, we can define the maximum number of bits per color for the monochrome devices.

Max-resolution:

With the help of this, we can specify the maximum resolution to be displayed in the output devices.

Max-width:

With the help of this, we can set the maximum width for the display area of the browser.

min-aspect-ratio:

With this help, we can set the minimum height and width for displaying the viewport on the web page.

Min-color:

With the help of this, we can define the minimum number of bits per color component that will be displayed on the webpage.

min-color-index:

With the help of this, we can define a minimum number of colors that the output devices can display.

Min-height:

With the help of this, we can set the minimum height for the display area of the browser.

Min-resolution:

With the help of this, we can specify the minimum resolution to be displayed in the output devices.

Min-width:

With the help of this, we can set the minimum width for the display area of the browser.

Monochrome:

With the help of this, we can provide the number of bits to display on the monochrome devices.

Orientation:

With the help of this, we can set the viewport that it is going to display in landscape mode or portrait mode.

Overflow-block:

With the help of this, we can control the situation when the content overflows the viewport.

Overflow-inline:

With the help of this, we can control the situation when the content with an inline axis overflows the viewport,

Pointer:

With the help of this, we can create the primary input mechanism for a pointing device.

Resolution:

With the help of this, we can set the resolution for the devices by taking the help of dpi or PCM.

Scan:

With the help of this, we can perform the scanning process for the devices.

Update:

With the help of this, we can perform the updation of output devices.

Width:

With the help of this, we can set the width of the viewpoint.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body {
  margin: 0;
  padding: 0;
}

.content {
  padding: 20px;
  text-align: center;
  color: #fff; /* Default text color */
}

/* Media query for screens larger than 768 pixels */
@media screen and (min-width: 769px) {
  body {
    background-color: #3498db; /* Blue background for larger screens */
  }

  .content {
    background-color: #2980b9; /* Blue background for larger screens */
  }
}

/* Media query for screens smaller than or equal to 768 pixels */
@media screen and (max-width: 768px) {
  body {
    background-color: #e74c3c; /* Red background for smaller screens */
  }

  .content {
    background-color: #c0392b; /* Red background for smaller screens */
  }
}

 </style>
</head>

 <body>
  <div class="content">
    <h1>Hello, Media Query Example!</h1>
    <p>This is an example of how to use @media rules to apply different styles based on screen size.</p>
  </div>

</body>
</html>

Output:

When the screen resolution is more than 764 px, the webpage looks like below.