Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Basics of Responsive Web Design – Media Queries

  • Last Updated : 22 Oct, 2021

Media Query is a CSS technique that is used to produce a responsive design. Essentially, it includes conditions, and responsive design will be only shown if those conditions are met. Why is this useful? Let’s say, you want to make an image smaller on all mobile devices but larger on all other devices such as iPads, laptops, and desktops, then the best way to make this possible is by using media queries. 

The general approach to using a media query includes:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

CSS




@media only screen and (/*condition goes here */) {
    body {
        /* Conditions goes here */
    }
  }

Explanation: The above is the the general way to call media query. In the parenthesis, we add the conditions for the browser windows such as what is the minimum/maximum size you want the browser window to be for the conditions in the “body” to appear



Example: Consider the following code:

CSS




@media only screen and (max-width: 500px) {
  body {
    background-color: black;
  }
}

In this case, we are basically saying that make this condition true:

body {    
    background-color: black; 
}

if and only if the width of the device is less than or equal to 500px. Of course, you can change the conditions and make it according to your desire. However, this is the general idea of how media queries work. 

We can also add another condition for the browser’s width, consider the following code:

CSS




@media only screen and (min-width: 300px) and (max-width: 500px) {
  body {
    background-color: black;
  }
}

In this case, notice how two conditions are given in the parenthesis? We are basically saying to execute the below code if and only if the minimum size of the browser is 300px and the maximum is 500px. So, the code will not execute if the browser window is less than 300px or more than 500px. It should in between of 300px and 500px (inclusive). This is another way of using a media query to satisfy the conditions you may have.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            background-color: blue;
        }
  
        @media only screen and (min-width: 500px) 
                and (max-width: 700px) {
            body {
                background-color: red;
            }
        }
    </style>
</head>
  
<body>
    <p>
        On devices with minimum width of 500px
        and maximum width of 700px, the background
        color will be black
    </p>
  
    <p>
        On the other hand, devices with less than the
        minimum width of 500px will have the
        body be displayed in blue
    </p>
</body>
  
</html>

Output: Media queries are very useful when you want a specific code to only execute if the conditions regarding the window’s size are met. For example, if you would like the background color of the page to be black on larger devices but blue on smaller devices, then media queries are the best way to handle such cases.




My Personal Notes arrow_drop_up
Recommended Articles
Page :