What are media queries in CSS?

Media queries in CSS

Media queries in CSS enables you to set your document correctly on different size of screens. These Media queries allow you to present your web pages on a specific range of devices like mobile phone, tablets, monitors and wide screens. Media queries allow you to make your web page responsive which can be easily opened on every types of screen.

The Media query works like a logical statement which can be either true or false as per the screen width provided by you at the time of coding. It works like “if” condition statement that can execute the true statements of false statements.

When media query is true, then the CSS applied to that particular width range will get executed. The media queries work with @media keyword.

There are different types of values which can be used to execute media queries.

  • all: It is used for all type of media devices.
  • print: Used for printer devices.
  • screen: Used to set different screens like mobile screen, tablet screen and monitor screen.
  • speech: Used for screen readers that reads the page out loud.

Let us now write a code for different screens using media query:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media queries</title>
    <style>
        .box{
            background-color: pink;
            text-align: center;
            font-size: 80px;
            height:100vh;
            display: none;         
        }
        @media screen and (max-width: 300px){
            #box1{
                display:block;
                background-color: red;               
            }           
        }
        @media screen and (min-width: 300px) and (max-width: 728px){
            #box2{
                display:block;
                background-color: yellow;
            }           
        }
        @media screen and (min-width: 728px) and (max-width: 1024px){
            #box3{
                display:block;
                background-color: rgb(53, 173, 37);
            }           
        }
        @media screen and (min-width: 1024px) and (max-width: 2048px){
            #box4{
                display:block;
                background-color: rgb(37, 123, 173);
            }           
        }
    </style>
</head>
<body>
        <div class="box" id="box1">I am a mobile Phone</div>
        <div class="box" id="box2">I am a tablet</div>
        <div class="box" id="box3">I am a monitor</div>
        <div class="box" id="box4">I am a big screen</div>
</body>
</html>

It will result for different media queries:

media query
Will work up to (max-width:300px)
media query
Will work for (min-width: 300px) and (max-width: 728px)
media query
Will work for (min-width: 728px) and (max-width: 1024px)
media query
Will work for (min-width: 1024px) and (max-width: 2048px)

Media queries are an excellent way to create responsive layouts. Using media queries, you can customise your website differently for users browsing on devices like smart phones or tablets without changing the actual content of the page.