Mediaquery

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Mediaquery</title>

</head>

<style>

.box{

font-size: 50px;

    border: 2px solid black;

    background-color: red;

    color: white;

    text-align: center;

    display: none;

}

@media (max-width: 300px){

    #box-1{display: block;

        background-color:green;

    }

}

@media (min-width: 300px ) and  (max-width: 500px){

    #box-2{display: block;

        background-color:red;

    }

}

@media (min-width: 500px) and  (max-width: 900px){

    #box-3{display: block;

        background-color:yellow;

    }

}

@media (min-width: 900px ){

    #box-4{display: block;

        background-color:blue;

    }

}

</style>

<body>

    <div class="box" id="box-1">Main ek Iphone hoon</div>

    <div class="box" id="box-2">Main ek Tablet hoon</div>

    <div class="box" id="box-3">Main ek Laptop hoon</div>

    <div class="box" id="box-4">Main ek Widescreen hoon</div>

</body>

</html>