CSS Media Queries

Introduction

It would be a very monotonous job for a developer to write different codes for different screen sizes. But we can resolve this problem using CSS media queries. We can write a single code irrespective of the size of the screen. 

In this article, we are going to get a complete guide to CSS media queries. 

So, without any further ado, let’s get started!

Recommended Topic, Difference Between CSS and SCSS

What are CSS Media Queries?

CSS media queries are a CSS feature that allows our web content to adapt to different devices based on screen size, device capabilities, and the user's preferences. 

Media queries help to make a modern responsive design with ease. We can use them to create different styles for different devices. It aids in the responsiveness of the website. 

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.

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.

Key Takeaways

In this article, we've learned about CSS media queries and their structure in detail.
 

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!