CSS Media Queries

Media Query Syntax

Let's see the syntax for media queries in CSS3:

@media mediatype and (condition) {
 /* CSS rules to apply when the condition is true */
}

Let's discuss the components of syntax : 

• 'mediatype`: Specifies the type of media to target. It can be one of the following values:
• 'all`: Suitable for all devices.
• 'print`: Used for print preview mode and printing documents.
• 'screen`: Used for computer screens, tablets, and smartphones.
• 'speech`: Used for speech synthesizers and screen readers.
• `condition`: Defines the specific condition or query to evaluate. It can include various features and their corresponding values. Some common conditions are:
• `min-width` and `max-width`: Specify the minimum and maximum width of the viewport, respectively.
• `min-height` and `max-height`: Specify the minimum and maximum height of the viewport, respectively.
• `orientation`: Specifies the orientation of the viewport, either `portrait` or `landscape`.
• `resolution`: Specifies the resolution of the device, such as `dpi`, `dpcm`, or `dppx`.

CSS Common Media Features : 

Let's discuss the some of common CSS media features:

Different Media Types

The different types of media queries are:

Structure of a Media Query

Here's the general structure of a media query:

@media <media-type> and (media feature) {
 /*...*/
}

• The @media keyword is also known as  "at-rule.”  We can also ignore the media type and the media feature, so the syntax given below is also a correct media rule:

@media print {
 /*...*/
}

Let’s see an example given below of a media query that will execute only when the screen's width is at least 480px wide:

@media screen and (min-width: 480px) {
 /*...*/
}

• The example given below is also a valid media query because media-type is optional for use. In this case, we will consider the media type as all:

@media (min-width: 480px) {
 /*...*/
}

Logical Operators

In media queries, there are a few logical operators:

• The and Operator 
• The or Operator
• The not Operator

The and Operator

As we have seen earlier, we can use the ‘and’ operator between a media type and media feature. The keyword used for this operator is ‘and.’ We can also connect multiple media.

For example:

@media (min-width: 480px) and (max-width: 700px) {
 /*...*/
}

The above example will be executed if the browser width is between 480 and 700 pixels.

The or Operator

The or operator is represented by a comma (,) or by or keyword. The ‘,’ is an old notation, whereas the ‘or’ keyword is a recent notation. 
 

For example:
 /* new notation */
@media (min-width: 400px) or (orientation: landscape) {
}
/* old notation */
@media (min-width: 400px), (orientation: landscape) {
}

In the above example, the media type is ignored. So it can be applied to all media types. If at least any media feature becomes true, the CSS in the media query will be executed.

The not operator

The not operator is used to negate a media query. The keyword used for this operator is ‘not’. While using a not-operator, we must set a media type like print or screen; otherwise, it will become ‘not all’. Hence, it will not be applied in any media type.

For Example: The query will be applied everywhere except for print media type in the code snippet given below.

@media not print {
 /*...*/
}

Nesting of media queries

We can nest one media query with other media queries as well. Nesting of media queries becomes helpful when we want to write multiple conditions together. We can use and operator to convert several media queries into one media query.

For example:

@media (min-width: 400px) and (max-width: 800px) {
  /*...*/
}
 /*The above code can also be written as*/
@media (min-width: 400px) {
 @media (max-width: 800px) {
   /*...*/
 }
}

Using min and max

In this article, we have seen so many times that various media features have been prefixed with min or max to represent minimum or maximum conditions, respectively. 

In the example below, the body's background is green when the viewport width is wider than 20em and narrower than 40em. If the viewport width does not match the condition, then it will be red.

body {
 background-color: red;
}

@media (min-width: 20em) and (max-width: 40em) {
 body {
   background-color: green;
 }
}

Media Query features

Media query features play a significant role in designing. It is essential to use parentheses for surrounding media feature expressions. The different types of media query features are:

• any-hover
• aspect-ratio 
• any-pointer 
• color 
• color-index 
• color-gamut 
• device-aspect-ratio 
• device-width 
• device-height 
• display-mode 
• forced-colors 
• grid 
• width 
• height 
• hover 
• monochrome 
• inverted-colors 
• orientation 
• overflow-inline 
• overflow-block 
• pointer 
• prefers-color-scheme 
• prefers-reduced-motion 
• prefers-contrast 
• resolution
• update 
• scripting

This was a brief introduction to CSS media queries. To get a broad view of this topic, you can refer to the CSS documentation here.

Check this out :  Versions of CSS

Frequently Asked Question

Q1) Why do we use media queries?

Answer: Media queries are beneficial for making responsive web design. They can also be used to identify whether the user is using a touchscreen or a mouse.

Q2) What is another name for a media query?

Answer: Video Query is another name for media query.

Q3) What is the viewport size?

Answer: The viewport size is the browser window size after removing the size of the scroll bars and toolbars. 

Q4) What is a breakpoint in a media query?

Answer: Every website is viewed on a variety of devices with various screen sizes and resolutions. A website's content responds to these points and adjusts itself to the screen size to display the correct layout, known as a breakpoint in the media query.

Conclusion

In this article, we discussed CSS media queries in detail. We explained the syntax of media queries and explained how they allow you to apply different styles based on the characteristics of the device or viewport. After that, we talked about the different media types, like all, print, screen, and speech, which target different devices and media.

Recommended Reading:

• Introduction to JQuery
   

If you want to learn advanced front-end web development, Coding Ninjas has one of the best courses available, which you can find here. 

Thank you for reading!