html

Media Queries in CSS | Explained

CSS3 introduced a very handy feature named “Media queries” that allows us to design responsive web pages. The web pages designed with the help of media queries are adjustable to different devices such as mobile phones, desktops, etc. Moreover, the use of media queries provides an improved user experience because of the responsive web designs. All in all, the media queries increase the worth of a webpage.

This write-up is going to present a comprehensive guide for the CSS media queries and it will be organized as follows:

So, let’s Start!

What are Media CSS Queries?

Media Query allows us to create various layouts depending upon the viewport’s size. For instance, media queries can detect whether the user is using a mouse or a touchscreen, etc.

The below list presents different things that a CSS Media query checks:

  • Viewport’s height and width.
  • Device’s height and width.
  • Resolution.
  • Device’s Orientation i.e. portrait or landscape.

All in all, we can say that media queries are very useful in detecting the various aspects related to the environment on which the site is running.

Basic Syntax

The basic syntax of media queries consists of multiple things such as media type (i.e. screen, all, etc.), a single or multiple expressions. The media query will always be initiated with the “@media”. The “media type” can be combined with expression(s) using a logical operator however, it’s optional:

@media mediatype and (expression/expressions)
{
/* Code/CSS rules */
}

A media query in CSS is a logical operation therefore whenever it becomes true, the related CSS will be applied to the target element.

Why Media Queries are Used

Media queries are used to provide a customized appearance to a website for various devices such as laptops, desktops, mobile phones, etc. So, we can say that media queries are used to create new CSS rules or to override the existing CSS to present a responsive website.

Types of Media Queries

There are four types of CSS media queries that can be used for different purposes as listed below:

Media Type Description
all Used for all media types i.e. screen, print, speech
screen Used for screens such as mobile phones, laptops, etc.
print Used for printers only.
speech Used for Screen Reading

Practical Implementation of CSS Media Queries

As of now, we have a basic idea of what a media query is, its syntax, why we should use it, and what are the different types of CSS media queries. And now for a profound understanding, we will implement these theoretical concepts into a practical scenario.

Example
In this example we are going to create three paragraphs and a heading, and we will set the body’s background color and text alignment as light gray and center respectively. Moreover, we will utilize the media queries to modify the background color and text alignment to sky blue and left which will come into action when the screen size will be wider than or equal to 360 pixels:

<html>
<head>
  <style>
    body {
      background-color: lightgrey;
      text-align: center;
    }

    @media screen and (min-width: 360px) {
      body {
        background-color: skyblue;
        text-align: left;
      }
    }
  </style>
</head>

<body>
  <h3>Media Queries</h3>
  <p>Background Color of Body is Light Gray</p>
  <p>Background Color will be changed from Light Gray to Sky Blue if the viewport is wider than 360 pixels</p>
</body>
</html>

The below-given snippet will show the working of CSS media queries:

From the output it is clear that initially, the background color was light gray and text was aligned in the center because at that time the screen’s width was less than 360. However, when we changed(greater than 360) the screen’s width, the background color and text alignment were modified to the sky blue color and left alignment.

Conclusion

Media queries are used to customize the website’s presentation according to the user’s screen size. Using media queries, we can show the various markups depending upon the device’s type(mobile, tablet, desktop). In CSS, media queries are a logical operation, and hence whenever it becomes true, the related CSS will be applied to the target element. This write-up presents a detailed understanding of CSS media queries and for better understanding, it provides code snippets along with respective outputs.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.